一.頁面事件
1.什么是下拉刷新
下拉刷新是移動端的專有名詞，指的是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數(shù)據(jù)的行為。
2.啟用下拉刷新
啟用下拉刷新有兩種方式：
a.全局開啟下拉刷新
在 app.json 的window 節(jié)點中，將 enablePullDownRefresh 設(shè)置為 true.
b.局部開啟下拉刷新
在頁面的.json 配置文件中，將 enablePullDownRefresh 設(shè)置為 true.
4．監(jiān)聽頁面的下拉刷新事件
在頁面的 js 文件中，通過 onPullDownRefresh (）函數(shù)即可監(jiān)聽當(dāng)前頁面的下拉刷新事件。
例如：在頁面的wxml中有如下UI結(jié)構(gòu)，點擊按鈕可以讓count值自增+1.
在觸發(fā)頁面的下拉刷新事件的時候，如果要把count的值重置為0，示例代碼如下：
5.停止下拉刷新的效果
當(dāng)處理完下拉刷新后，下拉刷新的 loading 效果會一直顯示，不會主動消失，所以需要手動隱藏 loading 效果。此時，調(diào)用 wx . stopPullDownRefresh (）可以停止當(dāng)前頁面的下拉刷新。示例 如下：
二.上拉觸底事件
1.什么是上拉觸底
上拉觸底是移動端的專有名詞，通過手指在屏幕上的上拉滑動操作，從而加載更多數(shù)據(jù)。
2．監(jiān)聽頁面的上拉觸底事件
在頁面的.js 文件中，通過 onReachBottom ()函數(shù)即可監(jiān)聽當(dāng)前頁面的上拉觸底事件。示例代碼如下：
3．配置上拉觸底距離
上拉觸底距離指的是觸發(fā)上拉觸底事件時，滾動條距離頁面底部的距離。
可以在全局或頁面的 json 配置文件中，通過 onReachBottomDistance 屬性來配置上拉觸底的距離。小程序默認(rèn)的觸底距離是50px，在實際開發(fā)中，可以根據(jù)自己的需求修改這個默認(rèn)值。
三.上拉觸底案例實踐
-
案例效果展示
2.案例實現(xiàn)步驟
1.定義獲取隨機(jī)顏色的方法
2.在頁面加載時獲取初始數(shù)據(jù)
3.渲染 UI 結(jié)構(gòu)并美化頁面效果
4.在上拉觸底時調(diào)用獲取隨機(jī)顏色的方法
5.添加 loading 提示效果
6.對上拉觸底進(jìn)行節(jié)流處理
3.步驟1—定義獲取隨機(jī)顏色的方法
3.步驟2—渲染UI結(jié)構(gòu)美化頁面的效果
3.步驟4—上拉觸底時獲取隨機(jī)顏色
3.步驟5-添加loading提示效果
實現(xiàn)效果如下：
3.步驟6—對上拉觸底進(jìn)行節(jié)流處理
①在 data 中定義 isloading 節(jié)流閥
. false 表示當(dāng)前沒有進(jìn)行任何數(shù)據(jù)請求
.true 表示當(dāng)前正在進(jìn)行數(shù)據(jù)請求
②在 getColors (）方法中修改 isloading 節(jié)流閥的值
．在剛調(diào)用 getColors 時將節(jié)流閥設(shè)置 true
．在網(wǎng)絡(luò)請求的 complete 回調(diào)函數(shù)中，將節(jié)流閥重置為 false
③在 onReachBottom 中判斷節(jié)流閥的值，從而對數(shù)據(jù)請求進(jìn)行節(jié)流控制
．如果節(jié)流閥的值為 true ，則阻止當(dāng)前請求
．如果節(jié)流閥的值為 false ，則發(fā)起數(shù)據(jù)請求
4.自定義編譯模式
過程:文章來源：http://www.zghlxwxcb.cn/news/detail-823830.html
=========>文章來源地址http://www.zghlxwxcb.cn/news/detail-823830.html
到了這里，關(guān)于微信小程序——頁面事件，.啟用下拉刷新監(jiān)聽頁面的下拉刷新事件，上拉觸底事件，停止下拉刷新的效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
