1、小程序home.js文件中重写上拉加载更多，下拉刷新方法
/**
* 下拉刷新
*/
onPullDownRefresh() {
},
/**
* 上拉加载更多
*/
onReachBottom() {
}
2、在小程序home.json文件中配置可以下拉刷新，
enablePullDownRefresh 小程序中默认值为false，需要设置为true
{
"enablePullDownRefresh": true,
"usingComponents": {
}
}
这是就有下拉刷新了。
！！！可是！
看不到下拉刷新的效果，需要在app.json 文件中修改一些配置
"window": {
"backgroundTextStyle": "light",
......
},
将light 修改为dark
3、实现上拉加载更多
/**
* 上拉加载更多
*/
async onReachBottom() {
const serviceList = await service.getServiceList()
//避免重复加载
if (!service.hasMoreData){
return
}
this.setData({
serviceList
})
}
在model中修改代码
class Service {
page = 1
count = 4
data = []
//是否有更多数据
hasMoreData = true
/**
*
* @param page 页码
* @param count 每页数量
* @param category_id 分类ID 可以为null
* @param type 类型 可以为null
*/
async getServiceList(category_id = null, type = null) {
//避免重复加载
if (!this.hasMoreData) {
return this.data
}
//发起网络请求
//统一网络响应处理，统一网络处理
const serviceList = await Http.request({
url: "v1/service/list", data: {
page: this.page,
count: this.count,
category_id: category_id || '', //判断category_id是否为null,如果为null,则赋值''
type: type || ''
}
})
//合并数据
this.data = this.data.concat(serviceList.data)
//判断是否有更多数据
this.hasMoreData = !(this.page === serviceList.last_page)
this.page++
return this.data
}
}
4、实现下拉刷新
/**
* 下拉刷新
*/
async onPullDownRefresh() {
const serviceList = await service.reset().getServiceList()
this.setData({
serviceList
})
wx.stopPullDownRefresh()
},
service.js中代码：
/**
* 重置属性值
*/
reset() {
this.page = 1
this.count = 4
this.data = []
this.hasMoreData = true
return this //返回当前的实例对象
}