微信小程序列表下拉刷新上拉加载实例代码

DEMO下载

效果图

原理

页面配置JSON

• enablePullDownRefresh：开启下拉刷新；

{   "enablePullDownRefresh": true,   "onReachBottomDistance": 50  }

WXML

<view class="tui-content">   <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>  </view>

JS

此处用setTimeout模拟请求数据；加载数据限制三次，调用wx.showToast显示没有更多数据。

Page({   data: {   dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],   count : 0   },   onPullDownRefresh(){   var self = this;   setTimeout(() => {    // 模拟请求数据，并渲染    var arr = self.data.dataList, max = Math.max(...arr);    for (var i = max + 1; i <= max + 3; ++i) {    arr.unshift(i);    }    self.setData({ dataList: arr });    // 数据成功后，停止下拉刷新    wx.stopPullDownRefresh();   }, 1000);   },   onReachBottom(){   var arr = this.data.dataList, max = Math.max(...arr);   if (this.data.count < 3) {    for (var i = max + 1; i <= max + 5; ++i) {    arr.push(i);    }    this.setData({    dataList: arr,    count: ++this.data.count    });   } else {    wx.showToast({    title: '没有更多数据了！',    image: '../../src/images/noData.png',    })   }   }  })

总结

必须在每次数据请求完成后，使用wx.stopPullDownRefresh()停止下拉刷新。

微信小程序 列表的上拉加载和下拉刷新的实现

以上就是微信小程序列表下拉刷新上拉加载实例代码的详细内容，更多内容请关注技术你好其它相关文章！