正文

微信小程序 --- 下拉刷新上拉加载

IP云
IP云V管理员/3 阅读
08/03
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

查看文档看到：page()函数注册页面的时候，有 onPullDownRefresh 监听用户下拉动作，onReachBottom 页面上拉触底事件的函数。

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

"enablePullDownRefresh": true,

简单示例：

// 下拉刷新
onPullDownRefresh: function () {
console.log("下拉刷新")
// 显示顶部刷新图标
wx.showNavigationBarLoading();
// // 隐藏导航栏加载框
// wx.hideNavigationBarLoading();
// // 停止下拉动作
// wx.stopPullDownRefresh();
},
// 上拉加载
onReachBottom:function(){
console.log("我在上拉");
},

在一些情况下结合后端：下拉刷新

// 下拉刷新
onPullDownRefresh: function () {
// 显示顶部刷新图标
wx.showNavigationBarLoading();
var that = this;
wx.request({
url: 'https://xxx/?page=0',
method: "GET",
header: {
'content-type': 'application/text'
},
success: function (res) {
that.setData({
moment: res.data.data
});
// 设置数组元素
that.setData({
moment: that.data.moment
});
console.log(that.data.moment);
// 隐藏导航栏加载框
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
}
})
},

上拉加载：

/*
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this;
// 显示加载图标
wx.showLoading({
title: '玩命加载中',
})
// 页数+1
page = page + 1;
wx.request({
url: 'https://xxx/?page=' + page,
method: "GET",
// 请求头部
header: {
'content-type': 'application/text'
},
success: function (res) {
// 回调函数
var moment_list = that.data.moment; for (var i = 0; i < res.data.data.length; i++) {
moment_list.push(res.data.data[i]);
}
// 设置数据
that.setData({
moment: that.data.moment
})
// 隐藏加载框
wx.hideLoading();
}
})
},

到此。