小编给大家分享一下微信小程序中如何实现页面下拉刷新和上拉加载更多，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
在用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;
// 初始页数设置为1
app.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: '玩命加载中',
})
// 页数+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: '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")
}
})
},看完了这篇文章，相信你对“微信小程序中如何实现页面下拉刷新和上拉加载更多”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
