微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联

Nekron 发布于2019-08-01 17:51 / 2487人阅读

摘要：因为循环中当前项的下标变量名默认为，当前项的变量名默认为。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。最新活动报名地址与天天练口语小程序总榜排名第四教育类排名第一的研发团队，面对面沟通交流。

§ 视图与数据关联

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

开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工具

首先

首先我们要做的是什么呢？直接写模板逻辑吗？不是，给用户以良好的提示是很重要的，所以，我们要做的第一件事就是，加载中...

这里我们采用官方 loading 组件，所以现在就可以直接拿来用了。

修改 index.wxml，增加 loading 组件。很明显，变量 hiddenLoading 控制着它的展示与隐藏:

数据加载中

然后修改 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 的主体结构是循环套循环。所以我们可以初步写出下面的结构：

数据加载中

这里有一点需要注意：在 wxml 做循环嵌套的时候，一定要重新定义 wx:for-item 字段。因为 wxml 循环中当前项的下标变量名默认为 index，当前项的变量名默认为 item。如果没有重新定义 item，在内层循环里通过 item 取到的值其实是外层循环的值。

官方 API - 列表渲染

下面我们就详细的分析下具体的结构，首先，每一天都有一个日期做开头，然后下面是一天的 4 篇文章。每篇文章分为左右结构，左边是标题，最多 3 行，超过的文字就用 … 表示。右边是一张文章的封面图，如果没有封面图就用默认的封面图。上面的日期如果是今天就显示今天，否则就直接显示月日，所以可以把 wxml 结构丰富成下面的样子：

数据加载中

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

这里有一个图片处理的属性可以看看相应的 API 了解下：

官方 API - 图片处理

页面结构搭建完了吗？并没有，还有一件很重要的事情要做。当我们的所有内容都展示完了，我们要友好的提醒用户，所以需要在最底端加上一个提示，把这些交互考虑进去之后的 wxml 就是下面这样的：


数据加载中

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

    暂时没有更多内容

到此，列表的页面与大体数据可以说是告一段落了，下一节我们介绍下如何增加阅读标识功能及分享功能、下拉更新功能

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

访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
包含：文章、视频、源代码

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

iKcamp最新活动

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

与“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队，面对面沟通交流。

云服务器 GPU云服务器微信小程序实时音视频不用编程制作微信小程序视频微信小程序怎么与阿里云服务器微信小程序数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51411.html

微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联

摘要：因为循环中当前项的下标变量名默认为，当前项的变量名默认为。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。最新活动报名地址与天天练口语小程序总榜排名第四教育类排名第一的研发团队，面对面沟通交流。 § 视图与数据关联本文配套视频地址：https://v.qq.com/x/page/z0554... 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工...

haitiancoder 2019-08-30 13:49 评论0 收藏0
微信小程序教学第三章第三节（含视频）：小程序中级实战教程：视图与数据关联

摘要：因为循环中当前项的下标变量名默认为，当前项的变量名默认为。包含文章视频源代码原创新书移动前端高效开发实战已在亚马逊京东当当开售。最新活动报名地址与天天练口语小程序总榜排名第四教育类排名第一的研发团队，面对面沟通交流。 § 视图与数据关联本文配套视频地址：https://v.qq.com/x/page/z0554... 开始前请把 ch3-3 分支中的 code/ 目录导入微信开发工...

scola666 2019-08-21 17:16 评论0 收藏0
微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。详情 - 功能完善本文配套视频地址：https://v.qq.com/x/page/f0555... 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。 Step 1....

phodal 2019-08-21 17:25 评论0 收藏0
微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。详情 - 功能完善本文配套视频地址：https://v.qq.com/x/page/f0555... 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。 Step 1....

cocopeak 2019-08-01 17:55 评论0 收藏0
微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善

摘要：详情功能完善本文配套视频地址开始前请把分支中的目录导入微信开发工具这一节中，我们把详情的其他功能完善起来下一篇分享返回列表。详情 - 功能完善本文配套视频地址：https://v.qq.com/x/page/f0555... 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具这一节中，我们把详情的其他功能完善起来：下一篇、分享、返回列表。 Step 1....

fizz 2019-08-29 13:44 评论0 收藏0