在日常项目开发中,前端工程师会不可避免的接触到微信小程序的开发,在开发时会遇到下拉刷新、上拉加载的问题。就让我们直接步入正题吧。
关于下拉刷新
一、在json文件中启用下拉事件
1.放在app.json文件中,注意这里写入是小程序所有页面启用下拉事件,一般情况下不会所有页面都启用;
2.放在单独页面对应的 .json文件中,此时只有单页面触发下拉事件。
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
其中 backgroundTextStyle 是用来配置下拉刷新loading的样式,仅支持dark和light两个颜色属性
然后进入到我们的js文件中
二、在js文件中使用 onPullDownRefresh 方法
onPullDownRefresh: function () {
this.setData({
list: [],
})
wx.showNavigationBarLoading()
// 定义下拉事件触发时,弹出的提示框
wx.showToast({
title: 'loading....',
icon: 'loading',
duration: 500
});
// 这里做了个延时功能,可不写
setTimeout(() => {
wx.hideNavigationBarLoading() // 隐藏导航条加载动画
wx.stopPullDownRefresh() // 停止当前页面下拉刷新
// 这里进行 接口方法的调用
this.list();
}, 500);
},
###### 下拉刷新到这里就结束了。
关于上拉触底
一、在js中我们需要先定义好基础参数。
Page({
/**
* 页面的初始数据
*/
data: {
page: 1, // 页码
size: 10, // 每页数据数
total: 0, // 数据总数
},
// 这里为请求接口方法,请自定义
getList(){
}
})
二、进入 onReachBottom 上拉触底这个API方法
让我们直接进入代码吧
onReachBottom: function () {
var p = this.data.page;
var s = this.data.size;
var t = this.data.titol;
// 当页码数乘每页数据量小于总数量时,页码数+1,同时再次请求接口请求新的数据
if (p * s < t) {
p=p+1;
this.setData({
page:p
})
this.getList(); //自己需要重新加载的
}else{
// 这里直接给出提示就好了
wx.showToast({
title: '暂无更多数据啦',
icon: 'none',
duration: 2000
});
}
}}
###### 上拉触底到这里就结束了,希望有用哦