&

国人自拍av片_无码观看激情视频_欧美日韩不卡中文网_黑人大群XXXX

11月

微信小程序教學(xué)第三章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程

1431

§ 視圖與數(shù)據(jù)關(guān)聯(lián)

本文配套視頻地址：

v.qq.com/x/page/z055…

開始前請把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工具

首先

首先我們要做的是什么呢？直接寫模板邏輯嗎？不是，給用戶以良好的提示是很重要的，所以，我們要做的先進(jìn)件事就是，加載中...

這里我們采用官方 loading 組件，所以現(xiàn)在就可以直接拿來用了。

修改 index.wxml ，增加 loading 組件。很明顯，變量 hiddenLoading 控制著它的展示與隱藏:

<loading hidden="{{hiddenLoading}}">數(shù)據(jù)加載中</loading>

然后修改 index.js，處理 loading 組件的狀態(tài)邏輯值 hiddenLoading

// 剛進(jìn)入列表頁面，就展示loading組件，數(shù)據(jù)加載完成后隱藏
onLoad (options) {
  this.setData({
    hiddenLoading: false
  })
  this.requestArticle()
},
// 列表渲染完成后，隱藏 loading組件
renderArticle (data) {
  if (data && data.length) {
    let newList = this.data.articleList.concat(data);
    this.setData({
    articleList: newList,
    hiddenLoading: true
    })
  }
}

分析頁面結(jié)構(gòu)

通過分析靜態(tài)頁面可以看出，這個列表是按照天為單位來分段，在每天的文章里又按照文章為單位繼續(xù)細(xì)分。所以可以知道這個 wxml 的主體結(jié)構(gòu)是循環(huán)套循環(huán)。所以我們可以初步寫出下面的結(jié)構(gòu)：

<loading hidden="{{hiddenLoading}}">數(shù)據(jù)加載中</loading>
<view class="wrapper">
  <view wx:for="{{ articleList }}" wx:for-item="group" wx:key="{{ group.date }}" class="group">
    <view wx:for="{{ group }}" wx:for-item="item" wx:key="{{ item.contentId }}"></view>
  </view>
</view>

這里有一點需要注意：在 wxml 做循環(huán)嵌套的時候，一定要重新定義 wx:for-item 字段。因為 wxml 循環(huán)中當(dāng)前項的下標(biāo)變量名默認(rèn)為 index ，當(dāng)前項的變量名默認(rèn)為 item 。如果沒有重新定義 item ，在內(nèi)層循環(huán)里通過 item 取到的值其實是外層循環(huán)的值。

官方 API - 列表渲染

下面我們就詳細(xì)的分析下具體的結(jié)構(gòu)，首先，每一天都有一個日期做開頭，然后下面是一天的 4 篇文章。每篇文章分為左右結(jié)構(gòu)，左邊是標(biāo)題，最多 3 行，超過的文字就用 … 表示。右邊是一張文章的封面圖，如果沒有封面圖就用默認(rèn)的封面圖。上面的日期如果是今天就顯示今天，否則就直接顯示月日，所以可以把 wxml 結(jié)構(gòu)豐富成下面的樣子：

<loading hidden="{{hiddenLoading}}">數(shù)據(jù)加載中</loading>
<view class="wrapper">
    <!--repeat-->
    <view wx:for="{{ articleList }}" wx:for-item="group" wx:key="{{ group.date }}" class="group">
        <view class="group-bar">
            <view class="group-title {{ group.formateDate === '今日' ? 'on' : ''}}">{{ group.formateDate }}</view>
        </view>
        <view class="group-content">
            <!--repeat-->
            <view wx:for="{{ group.articles }}" wx:for-item="item" wx:key="{{ item.contentId }}" data-item="{{ item }}" class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">{{ item.title }}</view>
                <image mode="aspectFill" class="group-content-item-img" src="{{ item.cover || defaultImg.coverImg }}" ></image>
            </view>
        </view>
    </view>
</view>

這里有一個圖片處理的屬性可以看看相應(yīng)的 API 了解下：

官方 API - 圖片處理

頁面結(jié)構(gòu)搭建完了嗎？并沒有，還有一件很重要的事情要做。當(dāng)我們的所有內(nèi)容都展示完了，我們要友好的提醒用戶，所以需要在最底端加上一個提示，把這些交互考慮進(jìn)去之后的 wxml 就是下面這樣的：

<!--index.wxml-->
<loading hidden="{{hiddenLoading}}">數(shù)據(jù)加載中</loading>
<view class="wrapper">
    <!--repeat-->
    <view wx:for="{{ articleList }}" wx:for-item="group" wx:key="{{ group.date }}" class="group">
        <view class="group-bar">
            <view class="group-title {{ group.formateDate === '今日' ? 'on' : ''}}">{{ group.formateDate }}</view>
        </view>
        <view class="group-content">
            <!--repeat-->
            <view wx:for="{{ group.articles }}" wx:for-item="item" wx:key="{{ item.contentId }}" data-item="{{ item }}" class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">{{ item.title }}</view>
                <image mode="aspectFill" class="group-content-item-img" src="{{ item.cover || defaultImg.coverImg }}" ></image>
            </view>
        </view>
    </view>

    <view hidden="{{ hasMore }}" class="no-more">暫時沒有更多內(nèi)容</view>
</view>

到此，列表的頁面與大體數(shù)據(jù)可以說是告一段落了，下一節(jié)我們介紹下如何增加閱讀標(biāo)識功能及分享功能、下拉更新功能

iKcamp官網(wǎng)：www.ikcamp.com

訪問官網(wǎng)更快閱讀全部免費分享課程：《iKcamp出品｜全網(wǎng)較新｜微信小程序｜基于較新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享》。

包含：文章、視頻、源代碼