- 本文將簡單介紹如何實現(xiàn)微信小程序的下拉刷新
- 將要使用的api：
- wx.showNavigationBarLoading(Object object)
- wx.showLoading(Object object)
- wx.hideLoading(Object object)
- wx.hideNavigationBarLoading(Object object)
- wx.stopPullDownRefresh(Object object)
- wx.request(Object object)
//刷新
onRefresh(){
//在當(dāng)前頁面顯示導(dǎo)航條加載動畫
wx.showNavigationBarLoading();
//顯示 loading 提示框派近。需主動調(diào)用 wx.hideLoading 才能關(guān)閉提示框
wx.showLoading({
title: '刷新中...',
})
this.getData();
},
//網(wǎng)絡(luò)請求攀唯，獲取數(shù)據(jù)
getData(){
wx.request({
url: '',
//網(wǎng)絡(luò)請求執(zhí)行完后將執(zhí)行的動作
complete(res){
//隱藏loading 提示框
wx.hideLoading();
//隱藏導(dǎo)航條加載動畫
wx.hideNavigationBarLoading();
//停止下拉刷新
wx.stopPullDownRefresh();
}
})
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
//調(diào)用刷新時將執(zhí)行的方法
this.onRefresh();
}
除了在js頁面編寫響應(yīng)的邏輯之外，還需要再相應(yīng)頁面的json中寫入以下配置渴丸，這個配置允許這個頁面進(jìn)行下拉刷新動作
{
"enablePullDownRefresh": true
}
特別需要注意的是：
- 寫之前先看看有無已經(jīng)存在的onPullDownRefresh:function()函數(shù)侯嘀，否則將不能監(jiān)聽到用戶的下拉刷新動作
- 注意相關(guān)api的配對使用
- 不要忘了在需要刷新結(jié)束時調(diào)用wx.stopPullDownRefresh()另凌，否則，頁面將會保持下拉狀態(tài)残拐、不會回彈途茫。
此外，除了下拉刷新溪食，有時候可能是在某個事件進(jìn)行時觸發(fā)刷新動作囊卜，此時可以調(diào)用wx.startPullDownRefresh(Object object) 此api的作用是：“ 開始下拉刷新。調(diào)用后觸發(fā)下拉刷新動畫错沃，效果與用戶手動下拉刷新一致栅组。”
