§视图与数据关联本文配套视频地址：https://v.qq.com/x/page/z0554...开始之前，请将ch3-3分支中的code/目录导入到微信开发工具中。首先，我们应该做什么？直接写模板逻辑？不，给用户一个好的提示是很重要的，所以我们首先要做的是，Loading...这里我们使用的是官方的loading组件，所以现在可以直接使用了。修改index.wxml，增加加载组件。很明显，变量hiddenLoading控制着它的显示和隐藏：列表页，显示加载组件，加载数据后隐藏加载组件。onLoad(options){this.setData({hiddenLoading:false})this.requestArticle()},//列表渲染完成后，加载组件隐藏renderArticle(data){if(data&&data.length){letnewList=this.data.articleList.concat(数据);this.setData({articleList:newList,hiddenLoading:true})}}页面结构分析通过分析静态页面可以看出，这个列表是按照天来划分的，在日常文章中，更进一步根据文章细分。所以我们可以知道这个wxml的主要结构是一个循环中的一个循环。所以我们可以初步写出如下结构：for-item="group"wx:key="{{group.date}}"class="group">这里需要注意一点：wxml在做循环嵌套的时候，一定要重新定义wx:for-item字段。因为wxml循环中当前项的下标变量名默认为index，而当前项的变量名默认为item。如果不重新定义item，在内层循环中通过item获取的值实际上就是外层循环的值。官方API-列表渲染下面详细分析一下具体结构。首先，每一天都有一个日期作为开始，然后一天有4篇文章。每篇文章分为左右结构，左边是标题，最多3行，多余的文字用....表示。右边是一篇文章的封面图。如果没有封面图片，则使用默认封面图片。上面的日期如果是今天就显示今天，否则就直接显示月日，所以wxml结构可以丰富如下：数据加载{{group.formatDate}}{{item.title}}这里是图片处理的一个属性，可以看对应的API了解：官方API-图片处理页面结构搭建好了吗？不，还有一件更重要的事要做当我们所有的内容都显示出来的时候，我们需要友好的提醒用户，所以我们需要在底部添加一个提示。考虑到这些交互后，wxml如下：数据加载{{group.formatDate}}{{item.title}}暂无内容to至此，列表的页面和通用数据可以说告一段落了。下一节将介绍如何添加阅读标识功能、分享功能、下拉更新功能。iKcamp官网：http://www.ikcamp.com访问官网阅读更快所有免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》包含：文章、视频、源码iKcamp原版新书《移动Web前端高效开发实战》已在亚马逊、京东发售.com和当当网。iKcamp最新活动报名地址：http://www.huodongxing.com/ev...与“天天练英语口语”mini总榜第四的研发团队面对面交流-程序，在教育类别中排名第一。
