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

§ 视图与数据关联

本文配套视频地址：
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、教育类排名第一的研发团队，面对面沟通交流。