简介:小程序上拉加载和下拉刷新应该是项目中经常用到的功能。下面的onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新
首先了解下两个官方API 上拉加载onReachBottom 和 下拉刷新onPullDownRefresh。
一、在你的当前json文件里设置window属性
"enablePullDownRefresh": true,
二、代码示范 (注释的很清楚)
上拉加载 onReachBottom
//页面上拉加载
onReachBottom() {
//判断是否开启上拉加载 data中的pageNum和pageSize total是接口返回的
if (this.data.pageNum * this.data.pageSize >= this.data.total) {
return;
}
this.setData({
pageNum: this.data.pageNum += 1
})
const list = this.data.List;
this.getNewlist().then(res => {
this.setData({
//利用es6 concat拼接
List: list.concat(res.data)
})
})
}
},
下拉刷新 onPullDownRefresh
onPullDownRefresh() {
wx.showNavigationBarLoading(); //动画
wx.showLoading({
title: '正在刷新',
})
this.setData({
pageNum: 1
})
//列表请求
this.getNewlist().then(res => {
if (res) {
this.setData({
List: res.data
})
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh(); //赋值后停止当前页面下拉刷新
}
})
}
怎么样? 是不是很简单,在我看来核心在于你的计算和数组的拼接