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


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 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
js三种排序算法分享
Aug 16 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
JS异步宏队列微队列原理详解
Sep 09 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
PHP通用检测函数集合
2006/11/25 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
js实现拖拽功能
2017/03/01 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
房地产销售计划书
2014/01/10 职场文书
运动会广播稿300字
2014/01/10 职场文书
学徒工职责
2014/03/06 职场文书
学校交通安全责任书
2014/08/25 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
利用Redis实现点赞功能的示例代码
2022/06/28 Redis