写项目的时候遇到这个问题,百度搜了一下,发现看不懂,不知道是我理解问题,还是什么,索性自己按照这个功能的实现逻辑自己写了 大概思路: 1.下拉刷新: 事件处理函数onPullDownRefresh(),一般页面生成的时候就会有,触发这个事件的时候,重新请求一下接口,处理完数据后,再用wx.stopPullDownRefresh停止刷新 过程文档上写的很清楚了,直接上代码 使用刷新页面对应的json文件
{
"navigationBarTitleText": "我的预约",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50,
"backgroundTextStyle": "dark",
"usingComponents": {}
}
窗口背景色默认是白色,backgroundTextStyle要设置成深色,dark,不然,下拉loading会看不清
js 下面展示一些 内联代码片 。
onPullDownRefresh: function () {
setTimeout(() => {
this.getList()
wx.stopPullDownRefresh();
}, 500)
},
this.getList() 获取的列表数据 2.上拉加载: 触发上拉事件的时候,让当前页面大小,pageSize+10(加多少看自己),再重新请求一下数据 代码: 下面展示一些 内联代码片 。
data: {
pageSize:10,
totalCount:0
},
getList() {
// 调接口时,将pageSize传过去
getReserveList({pageSize: this.data.pageSize}).then(res => {
if (res.code === 200) {
const reserveList = res.data.list
const pageSize = res.data.pageSize
const totalCount = res.data.totalCount
this.setData({
reserveList,
pageSize,
totalCount,
})
}
})
},
onReachBottom: function () {
var that = this
// 显示加载图标
wx.showLoading({
title: '玩命加载中...',
})
const pageSize = that.data.pageSize // 请求数据条数
const totalCount = that.data.totalCount // 总数据条数
if (pageSize < totalCount) {
that.setData({
pageSize: that.data.pageSize + 10
})
that.getList() // 重新请求数据
} else {
wx.showToast({
title: '已经到底啦~',
duration: 1000,
icon: 'none',
})
}
},
如果有什么要补充的,或者更好的方法,欢迎留言私戳~
|