微信小程序教學第三章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：視圖與數(shù)據(jù)關聯(lián)

haitiancoder 發(fā)布于2019-08-30 13:49 / 2033人閱讀

摘要：因為循環(huán)中當前項的下標變量名默認為，當前項的變量名默認為。包含文章視頻源代碼原創(chuàng)新書移動前端高效開發(fā)實戰(zhàn)已在亞馬遜京東當當開售。最新活動報名地址與天天練口語小程序總榜排名第四教育類排名第一的研發(fā)團隊，面對面溝通交流。

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

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

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

首先

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

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

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

數(shù)據(jù)加載中

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

// 剛進入列表頁面，就展示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
    })
  }
}

分析頁面結構

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

數(shù)據(jù)加載中

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

官方 API - 列表渲染

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

數(shù)據(jù)加載中

    
    
        
            {{ group.formateDate }}
        
        
            
            
                {{ item.title }}

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

官方 API - 圖片處理

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


數(shù)據(jù)加載中

    
    
        
            {{ group.formateDate }}
        
        
            
            
                {{ item.title }}
                
            
        
    

    暫時沒有更多內容

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

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

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

iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東、當當開售。

iKcamp最新活動

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

與“天天練口語”小程序總榜排名第四、教育類排名第一的研發(fā)團隊，面對面溝通交流。

GPU云服務器云服務器微信小程序實時音視頻不用編程制作微信小程序視頻微信小程序怎么與阿里云服務器微信小程序數(shù)據(jù)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/115566.html

微信小程序教學第三章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：視圖與數(shù)據(jù)關聯(lián)

摘要：因為循環(huán)中當前項的下標變量名默認為，當前項的變量名默認為。包含文章視頻源代碼原創(chuàng)新書移動前端高效開發(fā)實戰(zhàn)已在亞馬遜京東當當開售。最新活動報名地址與天天練口語小程序總榜排名第四教育類排名第一的研發(fā)團隊，面對面溝通交流。 § 視圖與數(shù)據(jù)關聯(lián) 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開始前請把 ch3-3 分支中的 code/ 目錄導入微信開發(fā)工...

scola666 2019-08-21 17:16 評論0 收藏0
微信小程序教學第三章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：視圖與數(shù)據(jù)關聯(lián)

摘要：因為循環(huán)中當前項的下標變量名默認為，當前項的變量名默認為。包含文章視頻源代碼原創(chuàng)新書移動前端高效開發(fā)實戰(zhàn)已在亞馬遜京東當當開售。最新活動報名地址與天天練口語小程序總榜排名第四教育類排名第一的研發(fā)團隊，面對面溝通交流。 § 視圖與數(shù)據(jù)關聯(lián) 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開始前請把 ch3-3 分支中的 code/ 目錄導入微信開發(fā)工...

Nekron 2019-08-01 17:51 評論0 收藏0
微信小程序教學第四章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：詳情-功能完善

摘要：詳情功能完善本文配套視頻地址開始前請把分支中的目錄導入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來下一篇分享返回列表。詳情 - 功能完善本文配套視頻地址：https://v.qq.com/x/page/f0555... 開始前請把 ch4-3 分支中的 code/ 目錄導入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來：下一篇、分享、返回列表。 Step 1....

phodal 2019-08-21 17:25 評論0 收藏0
微信小程序教學第四章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：詳情-功能完善

摘要：詳情功能完善本文配套視頻地址開始前請把分支中的目錄導入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來下一篇分享返回列表。詳情 - 功能完善本文配套視頻地址：https://v.qq.com/x/page/f0555... 開始前請把 ch4-3 分支中的 code/ 目錄導入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來：下一篇、分享、返回列表。 Step 1....

cocopeak 2019-08-01 17:55 評論0 收藏0
微信小程序教學第四章第三節(jié)（含視頻）：小程序中級實戰(zhàn)教程：詳情-功能完善

摘要：詳情功能完善本文配套視頻地址開始前請把分支中的目錄導入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來下一篇分享返回列表。詳情 - 功能完善本文配套視頻地址：https://v.qq.com/x/page/f0555... 開始前請把 ch4-3 分支中的 code/ 目錄導入微信開發(fā)工具這一節(jié)中，我們把詳情的其他功能完善起來：下一篇、分享、返回列表。 Step 1....

fizz 2019-08-29 13:44 評論0 收藏0