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

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

查看文档，在用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 = #39; #39;;
 self.setData({
 wxSearchData: self.data.wxSearchData
 // 初始化列表
 app.globalData.allData = null;
 // app.globalData.findData = null;
 // 初始页数设置为1
 app.globalData.currentPage = 1;
 var _currentPage = app.globalData.currentPage;
 // 搜索关键字
 app.globalData.findData = #39; #39;;
 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: #39;https://xxx:9090/v1/Tools/UserModel/GetUserList/ #39;,
 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: #39;玩命加载中 #39;,
 // 页数+1
 app.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: #39;https://api.xxx.com:9090/v1/Tools/UserModel/GetUserList/ #39;,
 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 )
 },

 相关推荐：

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

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

微信小程序中实现同步请求的方法

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

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！