最近小程序項目中頻繁用到了上拉加載和下拉刷新這兩個功能,所以在這里說一下過程和用法,也當留一個筆記
上拉加載:其實說白了就是分頁。因為在數據量龐大的情況下我們不可能將所有的數據都請求回來並渲染上,
這樣不僅影響加載速度,用戶體驗也相當差。
用戶上滑觸底時觸發,借助小程序的生命周期onReachBottom(),監聽用戶上拉觸底事件
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom
這是小程序的官方文檔,在這個函數中定義用戶上拉之后的一系列動作
//前置准備,頁面刷新時請求的數據
init(){
let _that = this
http.request({
url: '...',
method: 'post',
data: {
"pageNum": this.data.page, // 一次請求頁數,可以和后台協商參數,
"pageSize": 5, // 一次請求的數據個數,可以和后台協商參數,
},
success: (res) => {
let oldData = _that.data.list;
_that.setData({
list: oldData.concat(res.data.list),
//list在data中設置初始值為[],page也設置初始值為1,
//concat方法,將每次請求回來的res.data.list合並在一起
})
}
})
}
onReachBottom: function () {
在這之前要說一下前置准備,通常頁面上來剛刷新的時候,根據需求會定義加載數據的數量,
也就是我們從接口請求的時候向后台傳的參數之一,一定要借助頁面上來加載時的接口,在那里下功夫
然后用戶上拉的時候我們只需要將需要請求的頁數+1。然后再請求一次頁面加載時候的接口就ok了
this.setData({
page: this.data.page + 1
})
this.init()
}
至此,上拉刷新完成,如果需要其他操作,再配合判斷選擇是否觸發;
蟹蟹 ~ 👌