微信小程序(六):列表上拉加载下拉刷新示例


Posted in Javascript onJanuary 13, 2017

1.列表(本部分内容出入官方文档)

对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果。

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>
Page({
 data: {
 array: [{
  message: 'foo',
 }, {
  message: 'bar'
 }]
 }
})

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,当然也可以通过 wx:for-item 和 wx:for-index 指定。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
 {{idx}}: {{itemName.message}}
</view>

wx:for也可以嵌套,下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
 <view wx:if="{{i <= j}}">
  {{i}} * {{j}} = {{i * j}}
 </view>
 </view>
</view>

block wx:for

类似block wx:if,也可以将wx:for用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{[1, 2, 3]}}">
 <view> {{index}}: </view>
 <view> {{item}} </view>
</block>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。

2. 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

示例代码:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
 data: {
 objectArray: [
  {id: 5, unique: 'unique_5'},
  {id: 4, unique: 'unique_4'},
  {id: 3, unique: 'unique_3'},
  {id: 2, unique: 'unique_2'},
  {id: 1, unique: 'unique_1'},
  {id: 0, unique: 'unique_0'},
 ],
 numberArray: [1, 2, 3, 4]
 },
 switch: function(e) {
 const length = this.data.objectArray.length
 for (let i = 0; i < length; ++i) {
  const x = Math.floor(Math.random() * length)
  const y = Math.floor(Math.random() * length)
  const temp = this.data.objectArray[x]
  this.data.objectArray[x] = this.data.objectArray[y]
  this.data.objectArray[y] = temp
 }
 this.setData({
  objectArray: this.data.objectArray
 })
 },
 addToFront: function(e) {
 const length = this.data.objectArray.length
 this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
 this.setData({
  objectArray: this.data.objectArray
 })
 },
 addNumberToFront: function(e){
 this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
 this.setData({
  numberArray: this.data.numberArray
 })
 }
})

2.下拉刷新

小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。

1. 需要在 .json 文件中配置。(.json 文件的格式和 app.json与具体页面的.json文件的区别,前文已经讲过,有疑问的可以移步。) 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新。

具体页面的.json文件:

{
 "enablePullDownRefresh": true
}

app.json文件:

"window": {
 "enablePullDownRefresh": true
 }

2. 在js文件中添加回调函数

// 下拉刷新回调接口
 onPullDownRefresh: function () {
  // do somthing
 },

3. 添加数据

通常情况下的下拉刷新操作,就是把查询条件重置,让页面显示最新的一页数据。下面是笔者demo中的下拉刷新回调接口的代码,同时也是一般情况下的操作流程。

// 下拉刷新回调接口
 onPullDownRefresh: function () {
  // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。
  // 刷新时需把total重置为0,代表重新从第一条请求。
  total = 0; 
  // this.data.dataArray 是页面中绑定的数据源
  this.data.dataArray = [];
  // 网络请求,重新请求一遍数据
  this.periphery();
  // 小程序提供的api,通知页面停止下拉刷新效果
  wx.stopPullDownRefresh;
 },

3 .上拉加载

同下拉刷新一样,小程序中也提供了用于上拉时回调的接口。官方文档中并没有很详细的介绍,经测试发现,上拉回调的接口并不需要额外的配置(下拉时需要在 .json文件中配置 "enablePullDownRefresh": true),直接在页面滑动到底部时就能拿到回调。

1. 在js文件中添加回调函数

// 上拉加载回调接口
 onReachBottom: function () {
  // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。
  // 上拉时需把total在原来的基础上加上count,代表从count条后的数据开始请求。
  total += count;
  // 网络请求
  this.periphery();
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 #Javascript
微信小程序(三):网络请求
Jan 13 #Javascript
Javascript自定义事件详解
Jan 13 #Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 #Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 #Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 #Javascript
Vue数据驱动模拟实现5
Jan 13 #Javascript
You might like
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
Smarty保留变量用法分析
2016/05/23 PHP
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
Python做文本按行去重的实现方法
2016/10/19 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python使用剪切板的方法
2017/06/06 Python
python编写Logistic逻辑回归
2020/12/30 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
Python微信操控itchat的方法
2019/05/31 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python中return函数返回值实例用法
2020/11/19 Python
python实现猜拳游戏项目
2020/11/30 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
学年自我鉴定范文
2013/10/01 职场文书
音乐表演专业毕业生求职信
2013/10/14 职场文书
鲜花方阵解说词
2014/02/13 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
医院合作协议书
2014/08/19 职场文书
出生医学证明书
2014/09/15 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python