1. 下拉刷新事件
下拉刷新是移動(dòng)端的專有名詞，指的是通過(guò)手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)的行為。
1.1. 開(kāi)啟下拉刷新
開(kāi)啟下拉刷新有兩種方式：全局和局部。一般的話是開(kāi)啟局部下刷新，哪里用到哪里開(kāi)。
- 全局開(kāi)啟下拉刷新
● 在 app.json 的 window 節(jié)點(diǎn)中，將 enablePullDownRefresh 設(shè)置為 true - 局部開(kāi)啟下拉刷新
● 在頁(yè)面的 .json 配置文件中，將 enablePullDownRefresh 設(shè)置為 true
1.2. 配置下拉刷新的窗口樣式
同樣配置下拉刷新的窗口樣式，也有兩種方式。
在app.json中配置window里面的屬性，或者在當(dāng)前頁(yè)面的.json文件中進(jìn)行配置。
backgroundColor 用來(lái)配置下拉刷新窗口的背景顏色，僅支持16 進(jìn)制的顏色值 backgroundTextStyle 用來(lái)配置下拉刷新 loading 的樣式，僅支持 dark 和 light.
{
"usingComponents": {},
// 開(kāi)啟下拉刷新
"enablePullDownRefresh": true,
// 下拉刷新配置項(xiàng)
"backgroundTextStyle": "dark",
"backgroundColor": "#efefef"
}
1.3. 監(jiān)聽(tīng)頁(yè)面的下拉刷新事件
在當(dāng)前頁(yè)面的.js文件中，通過(guò)onPullDownRefresh() 函數(shù)即可監(jiān)聽(tīng)當(dāng)前頁(yè)面的下拉刷新事件。通過(guò)stopPullDownRefresh()函數(shù)來(lái)停止恢復(fù)下拉框。
onPullDownRefresh() {
// 刷新數(shù)據(jù)的代碼塊
// ...
// 下拉刷新數(shù)據(jù)后自動(dòng)回彈 將loading的樣式取消
wx.stopPullDownRefresh()
},
2. 上拉觸底事件
上拉觸底是移動(dòng)端的專有名詞，通過(guò)手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。
比如，微信小程序中最常用的，一直往下滑，當(dāng)快要到達(dá)底部時(shí)，數(shù)據(jù)會(huì)刷新并且填充到當(dāng)前頁(yè)面，這就是上拉觸底事件。
2.1. 監(jiān)聽(tīng)頁(yè)面的上拉觸底事件
在頁(yè)面的 .js 文件中，通過(guò) onReachBottom() 函數(shù)即可監(jiān)聽(tīng)當(dāng)前頁(yè)面的上拉觸底事件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-561727.html
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom() {
console.log("觸發(fā)上拉觸底事件")
},
2.2. 配置上拉觸底的距離
上拉觸底距離指的是觸發(fā)上拉觸底事件時(shí)，滾動(dòng)條距離頁(yè)面底部的距離。
可以在全局或頁(yè)面的 .json 配置文件中，通過(guò) onReachBottomDistance 屬性來(lái)配置上拉觸底的距離。
小程序默認(rèn)的觸底距離是 50px，在實(shí)際開(kāi)發(fā)中，可以根據(jù)自己的需求修改這個(gè)默認(rèn)值。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-561727.html
到了這里，關(guān)于微信小程序頁(yè)面事件，下拉刷新事件和上拉觸底事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
