微信小程序中实现页面下拉刷新和上拉加载更多的代码示例

本篇文章给大家带来的内容是关于微信小程序中实现页面下拉刷新和上拉加载更多的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

查看文档，在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部

在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效，在单独页面设置则对当前页面有效；

index.json{"enablePullDownRefresh": true,"onPullDownRefresh": true,"onReachBottom": true}如果看不到下拉动画，需要在 app.json 中设置"window": {"backgroundTextStyle": "dark"},接下来就是写 js 代码了

下拉刷新/*** 下拉刷新恢复初始化*/onPullDownRefresh: function () {var self = this;// 刷新清空搜索框self.data.wxSearchData.value = '';self.setData({wxSearchData: self.data.wxSearchData})// 初始化列表app.globalData.allData = null;// app.globalData.findData = null;// 初始页数设置为1app.globalData.currentPage = 1;var _currentPage = app.globalData.currentPage;// 搜索关键字app.globalData.findData = '';var _find = app.globalData.findData;// 10位数时间戳var _timeStamp = Date.parse(new Date());_timeStamp = _timeStamp / 1000;// 秘钥var _tokenKey = _timeStamp + "xxx" + "127.0.0.1" + _find;_tokenKey = key.md5(_tokenKey);wx.request({url: 'https://xxx:9090/v1/Tools/UserModel/GetUserList/',data: {find: _find,tokenKey: _tokenKey,timeStamp: _timeStamp,currentPage: _currentPage,},method: "GET",header: {"Content-Type": "application/json",},success: function (res) {app.globalData.allData = res.data.datas;// console.log(res)self.setData({list: res.data.datas})// 显示顶部刷新图标wx.showNavigationBarLoading();// 隐藏导航栏加载框wx.hideNavigationBarLoading();// 停止下拉动作wx.stopPullDownRefresh();},fail: function () {console.log("error")}})},上拉加载更多/*** 上拉刷新触底加载更多*/onReachBottom: function () {var self = this;// 显示加载图标wx.showLoading({title: '玩命加载中',})// 页数+1app.globalData.currentPage ++;var _currentPage = app.globalData.currentPage;// 搜索关键字var _find = app.globalData.findData;// 10位数时间戳var _timeStamp = Date.parse(new Date());_timeStamp = _timeStamp / 1000;// 秘钥var _tokenKey = _timeStamp + "xxx" + "127.0.0.1" + _find;_tokenKey = key.md5(_tokenKey);wx.request({url: 'https://api.xxx.com:9090/v1/Tools/UserModel/GetUserList/',data: {find: _find,tokenKey: _tokenKey,timeStamp: _timeStamp,currentPage: _currentPage,},method: "GET",header: {"Content-Type": "application/json",},success: function (res) {// 回调函数，将新数据压到队列里for (var i = 0; i < res.data.each_page; i++) {app.globalData.allData.push(res.data.datas[i]);}// 设置数据self.setData({list: app.globalData.allData})// 隐藏加载框wx.hideLoading();},fail: function () {console.log("error")}})}, 相关推荐：

微信小程序中如何来设置全局变量（代码）

微信小程序中如何调用本地的接口

微信小程序中实现同步请求的方法以上就是微信小程序中实现页面下拉刷新和上拉加载更多的代码示例的详细内容，更多请关注小潘博客其它相关文章！