微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联
§ 视图与数据关联
本文配套视频地址:
https://v.qq.com/x/page/z0554wyswib.html
开始前请把
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
取到的值其实是外层循环的值。
下面我们就详细的分析下具体的结构,首先,每一天都有一个日期做开头,然后下面是一天的 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 了解下:
页面结构搭建完了吗?并没有,还有一件很重要的事情要做。当我们的所有内容都展示完了,我们要友好的提醒用户,所以需要在最底端加上一个提示,把这些交互考虑进去之后的 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最新活动
与
“天天练口语”
小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。
微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联的更多相关文章
- 微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具
iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享>. ...
- 微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善
详情 - 功能完善 本文配套视频地址: https://v.qq.com/x/page/f0555nfdi14.html 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具 这一节中, ...
- 微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识
下拉更新.分享.阅读标识 本文配套视频地址: https://v.qq.com/x/page/h0554i4u5ob.html 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一 ...
- 微信小程序教学第三章(含视频):小程序中级实战教程:列表-页面逻辑处理
§ 页面逻辑处理 本文配套视频地址: https://v.qq.com/x/page/n0554dndrez.html 开始前请把 ch3-2 分支中的 code/ 目录导入微信开发工具 修改 ind ...
- 微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作
详情 - 页面制作 本文配套视频地址: https://v.qq.com/x/page/o0555o20xjd.html 开始前请把 ch4-1 分支中的 code/ 目录导入微信开发工具 这一章节中 ...
- 微信小程序教学第四章第二节(含视频):小程序中级实战教程:详情-视图渲染
§ 详情 - 数据渲染 本文配套视频地址: https://v.qq.com/x/page/x055550lrvd.html 开始前请把 ch4-2 分支中的 code/ 目录导入微信开发工具 这一节 ...
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
§ 封装网络请求及 mock 数据 本文配套视频地址: https://v.qq.com/x/page/i05544fogcm.html 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发 ...
- 【软件构造】第三章第三节 抽象数据型(ADT)
第三章第三节 抽象数据型(ADT) 3-1节研究了“数据类型”及其特性 ; 3-2节研究了方法和操作的“规约”及其特性:在本节中,我们将数据和操作复合起来,构成ADT,学习ADT的核心特征,以及如何设 ...
- iKcamp出品微信小程序教学共5章16小节汇总(含视频)
随机推荐
- [转]Android应用安装包apk文件的反编译与重编译、重签名
背景介绍: 最近在做Robotium自动化测试,使用到solo.takeScreenshot()函数以在测试过程中截图,但此函数需要被测试APP具有<uses-permission androi ...
- Qt----拖拽
最近比较忙,今天此才有时间来继续学习下Qt.Qt的拖拽可以按字面意思分为拖和拽两部分.一般来说我们常见的拖拽分别由两个程序合作完成.例如我们经常把桌面的文件拖拽进其他目录: 这个拖拽在Qt中由两方合作 ...
- 使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端
预备知识: http://www.cnblogs.com/cgzl/p/7746496.html 第一部分: http://www.cnblogs.com/cgzl/p/7780559.html 第二 ...
- Spring4 JDBC详解
Spring4 JDBC详解 在之前的Spring4 IOC详解 的文章中,并没有介绍使用外部属性的知识点.现在利用配置c3p0连接池的契机来一起学习.本章内容主要有两个部分:配置c3p0(重点)和 ...
- C#学习笔记---数据库连接与异常
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- JIT——即时编译的原理
介绍 java 作为静态语言十分特殊,他需要编译,但并不是在执行之前就编译为本地机器码. 所以,在谈到 java的编译机制的时候,其实应该按时期,分为两个部分.一个是 javac指令 将java源码 ...
- canvas动画之动态绘出六边形
先上 demo: http://en.jsrun.net/W5iKp/show 这两天我一直在研究这个动画,花了大量的时间来想是如何实现的, 一开始我是想在进入 canvas 时按时间来用 lineT ...
- Ceph编译安装教程
Ceph官方版本目前支持的纠删码很有限,实验室这块希望能够整合我们自主开发的纠删码BRS(Binary Reed–Solomon encoding),所以需要编译Ceph环境.Ceph官方目前推荐的安 ...
- android动画基础之Animation
android 动画 摘要: 概述 最近总结一下Android的一些东西,毕竟基础不牢地动山摇.本篇主要涉及Animation,对Tween和Frame动画做些总结. Tween Tween动画即补间 ...
- NGUI_01
序言:这是张三疯第一次开始NGUI插件的学习,刚开始学习,肯定有很多漏洞,后期会及时的补上的.希望大家可以见谅,希望大佬多多指教. 扩充:为提供和我一样的小白找不到免费的NGUI插件,这里分享百度网盘 ...