成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

Nekron / 2555人閱讀

摘要：因?yàn)檠h(huán)中當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為，當(dāng)前項(xiàng)的變量名默認(rèn)為。包含文章視頻源代碼原創(chuàng)新書(shū)移動(dòng)前端高效開(kāi)發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開(kāi)售。最新活動(dòng)報(bào)名地址與天天練口語(yǔ)小程序總榜排名第四教育類(lèi)排名第一的研發(fā)團(tuán)隊(duì)，面對(duì)面溝通交流。

§ 視圖與數(shù)據(jù)關(guān)聯(lián) 
本文配套視頻地址：
https://v.qq.com/x/page/z0554...
開(kāi)始前請(qǐng)把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開(kāi)發(fā)工具 ?


首先

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

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

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


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

// 剛進(jìn)入列表頁(yè)面，就展示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
    })
  }
}
分析頁(yè)面結(jié)構(gòu)

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


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

官方 API - 列表渲染


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



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


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

官方 API - 圖片處理


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




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


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

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


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



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

報(bào)名地址：http://www.huodongxing.com/ev...


與“天天練口語(yǔ)”小程序總榜排名第四、教育類(lèi)排名第一的研發(fā)團(tuán)隊(duì)，面對(duì)面溝通交流。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51411.html

相關(guān)文章

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

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

    haitiancoder 評(píng)論0 收藏0

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

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

    scola666 評(píng)論0 收藏0

  • 微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：詳情-功能完善

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

    phodal 評(píng)論0 收藏0

  • 微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：詳情-功能完善

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

    cocopeak 評(píng)論0 收藏0

  • 微信小程序教學(xué)第四章第三節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：詳情-功能完善

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

    fizz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<