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


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 相关文章推荐
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
angular实现商品筛选功能
Feb 01 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
this.$toast() 了解一下?
Apr 18 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python3中zip()函数使用详解
2018/06/29 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
python 元组和列表的区别
2020/12/30 Python
详解python中的异常捕获
2020/12/15 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
标准自荐信范文
2014/01/29 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
党的生日活动方案
2014/08/15 职场文书
高二英语教学反思
2016/03/03 职场文书
java实现web实时消息推送的七种方案
2022/07/23 Java/Android