1.頁面事件–下拉刷新事件

1.1什么是下拉刷新

下拉式移動端的專有名詞，指的是通過手指子在屏幕上的下拉滑動操作，從而重新加載頁面數據

2.啟動下拉刷新

（1）方法一：全局開啟下拉刷新

在app.json的window節點中，將enablePullDownRefresh設置為true

{"pages": ["pages/switch/switch","pages/navigator/navigator","pages/test/test","pages/tabBar/tabBar","pages/index/index"],"window": {"enablePullDownRefresh": true} }

（2）方法二：局部開啟下拉刷新
在頁面的.json配置文件中，將enablePullDownRefresh設置為true

{"usingComponents": {},"enablePullDownRefresh": true }

在實際開發中，推薦使用第二種方式，為需要的頁面單獨開啟下拉刷新效果。

3.配置下拉刷新窗口的樣式

在全局或者頁面的.json配置文件中，通過backgroundColor和backgroundTextStyle來配置下拉刷新窗口的樣式，其中：

backgroundColor用來配置下拉刷新窗口的背景顏色，僅支持16進制的顏色值

backgroundTextStyle用來配置下拉刷新loading的樣式，僅支持dark和light

{"pages": ["pages/switch/switch","pages/navigator/navigator","pages/test/test","pages/tabBar/tabBar","pages/index/index"],"window": {"backgroundTextStyle": "dark","backgroundColor":"#bfa","enablePullDownRefresh": true}, }

4.監聽頁面的下拉刷新事件

在頁面的.js文件中，通過onPullDownRefresh()函數可以監聽當前頁面的下拉刷新是事件。（下拉刷新頁面的時候觸發該函數的調用）

例如：在頁面的wxml中有如下的ui結構，點擊按鈕可以讓count值自增+1，刷新頁面將count重置為0

在.wxml中

<view >{{count}}</view> <button bindtap="handler">點我+1</button>

在.js中

data: {count:0},handler(){this.setData({count:this.data.count+1})}, onPullDownRefresh() {//console.log("111");//當頁面刷新會被觸發this.setData({count:0})},

5.停止下拉刷新的效果

當處理完下拉刷新后，下拉刷新的loading效果會一直顯示，不會主動消失，所以需要手動停止loading的效果。此時，調用wx.stopPullRefresh()可以停止當前頁面的下拉刷新。
在.wxml中

<view >{{count}}</view> <button bindtap="handler">點我+1</button>

在.js中

data: {count:0},handler(){this.setData({count:this.data.count+1})}, onPullDownRefresh() {this.setData({count:0}),wx.stopPullDownRefresh();},

2.頁面事件–上拉觸底事件

2.1什么是上拉觸底

上拉觸底是移動端地專有名詞，通過手指在屏幕上的上拉滑動操作，從而加載更多數據的行為

2.2監聽頁面的上拉觸底事件

在頁面的.js文件中，通過onReachBottom()函數即可監聽當前的上拉觸底事件

在.js中

onReachBottom() {console.log('觸發了上拉觸底事件');},

當wxml的數據夠多的時候，當向上滑動觸到底的時候，就會觸發該方法

2.3配置上拉觸底距離

上拉觸底指的是觸發觸底事件，滾動條距離頁面底部的距離。

可以在全局或者頁面的.json配置文件中，通過onReachBottomDistance屬性來配置上拉觸底的距離

小程序默認的觸底距離是50px,在實際開發中，可以根據自己的需求修改這個默認值。

{"onReachBottomDistance": 10 }

2.3配置上拉觸底案例

2.3.1

定義獲取隨機顏色的方法

在頁面加載時獲取初始值

渲染ui結構并美化頁面效果

在上拉觸底時調用獲取隨機顏色的方法

添加loading提示效果

對上拉觸底進行節流處理

總結

以上是生活随笔為你收集整理的【微信小程序】-—下拉刷新、上拉触底事件详细讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。