微信小程序教學第三章第三節（含視頻）：小程序中級實戰教程：視圖與數據關聯

§ 視圖與數據關聯

本文配套視頻地址：
https://v.qq.com/x/page/z0554...

---

開始前請把 ch3-3 分支中的 code/ 目錄導入微信開發工具  

首先

首先咱們要作的是什麼呢？直接寫模板邏輯嗎？不是，給用戶以良好的提示是很重要的，因此，咱們要作的第一件事就是，加載中...

這裏咱們採用官方 loading 組件，因此如今就能夠直接拿來用了。

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

<loading hidden="{{hiddenLoading}}">數據加載中</loading>

而後修改 index.js，處理 loading 組件的狀態邏輯值 hiddenLoading

// 剛進入列表頁面，就展現loading組件，數據加載完成後隱藏
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
    })
  }
}

分析頁面結構

經過分析靜態頁面能夠看出，這個列表是按照 天 爲單位來分段，在天天的文章裏又按照 文章 爲單位繼續細分。因此能夠知道這個 wxml 的主體結構是循環套循環。因此咱們能夠初步寫出下面的結構：

<loading hidden="{{hiddenLoading}}">數據加載中</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 作循環嵌套的時候，必定要從新定義 wx:for-item 字段。由於 wxml 循環中當前項的下標變量名默認爲 index，當前項的變量名默認爲 item。若是沒有從新定義 item，在內層循環裏經過 item 取到的值實際上是外層循環的值。

官方 API - 列表渲染

下面咱們就詳細的分析下具體的結構，首先，每一天都有一個日期作開頭，而後下面是一天的 4 篇文章。每篇文章分爲左右結構，左邊是標題，最多 3 行，超過的文字就用 … 表示。右邊是一張文章的封面圖，若是沒有封面圖就用默認的封面圖。上面的日期若是是今天就顯示今天，不然就直接顯示月日，因此能夠把 wxml 結構豐富成下面的樣子：

<loading hidden="{{hiddenLoading}}">數據加載中</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>

這裏有一個圖片處理的屬性能夠看看相應的 API 瞭解下：

官方 API - 圖片處理

頁面結構搭建完了嗎？並無，還有一件很重要的事情要作。當咱們的全部內容都展現完了，咱們要友好的提醒用戶，因此須要在最底端加上一個提示，把這些交互考慮進去以後的 wxml 就是下面這樣的：

<!--index.wxml-->
<loading hidden="{{hiddenLoading}}">數據加載中</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">暫時沒有更多內容</view>
</view>

到此，列表的頁面與大致數據能夠說是告一段落了，下一節咱們介紹下如何增長閱讀標識功能及分享功能、下拉更新功能

iKcamp官網：http://www.ikcamp.com

訪問官網更快閱讀所有免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基於最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。

iKcamp最新活動

報名地址：http://www.huodongxing.com/ev...

與「每天練口語」小程序總榜排名第4、教育類排名第一的研發團隊，面對面溝通交流。