1.頁(yè)面事件–下拉刷新事件

1.1什么是下拉刷新

下拉式移動(dòng)端的專(zhuān)有名詞，指的是通過(guò)手指子在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)

2.啟動(dòng)下拉刷新

（1）方法一：全局開(kāi)啟下拉刷新

在app.json的window節(jié)點(diǎn)中，將enablePullDownRefresh設(shè)置為true

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

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

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

在實(shí)際開(kāi)發(fā)中，推薦使用第二種方式，為需要的頁(yè)面單獨(dú)開(kāi)啟下拉刷新效果。

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

在全局或者頁(yè)面的.json配置文件中，通過(guò)backgroundColor和backgroundTextStyle來(lái)配置下拉刷新窗口的樣式，其中：

backgroundColor用來(lái)配置下拉刷新窗口的背景顏色，僅支持16進(jìn)制的顏色值

backgroundTextStyle用來(lái)配置下拉刷新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.監(jiān)聽(tīng)頁(yè)面的下拉刷新事件

在頁(yè)面的.js文件中，通過(guò)onPullDownRefresh()函數(shù)可以監(jiān)聽(tīng)當(dāng)前頁(yè)面的下拉刷新是事件。（下拉刷新頁(yè)面的時(shí)候觸發(fā)該函數(shù)的調(diào)用）

例如：在頁(yè)面的wxml中有如下的ui結(jié)構(gòu)，點(diǎn)擊按鈕可以讓count值自增+1，刷新頁(yè)面將count重置為0

在.wxml中

<view >{{count}}</view>
<button bindtap="handler">點(diǎn)我+1</button>

在.js中

 data: {
    count:0
  },
  handler(){
    this.setData({
      count:this.data.count+1
    })
  },
onPullDownRefresh() {
    //console.log("111");//當(dāng)頁(yè)面刷新會(huì)被觸發(fā)
    this.setData({
      count:0
    })
  },

5.停止下拉刷新的效果

當(dāng)處理完下拉刷新后，下拉刷新的loading效果會(huì)一直顯示，不會(huì)主動(dòng)消失，所以需要手動(dòng)停止loading的效果。此時(shí)，調(diào)用wx.stopPullRefresh()可以停止當(dāng)前頁(yè)面的下拉刷新。
在.wxml中

<view >{{count}}</view>
<button bindtap="handler">點(diǎn)我+1</button>

在.js中

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

2.頁(yè)面事件–上拉觸底事件

2.1什么是上拉觸底

上拉觸底是移動(dòng)端地專(zhuān)有名詞，通過(guò)手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為

2.2監(jiān)聽(tīng)頁(yè)面的上拉觸底事件

在頁(yè)面的.js文件中，通過(guò)onReachBottom()函數(shù)即可監(jiān)聽(tīng)當(dāng)前的上拉觸底事件

在.js中

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

當(dāng)wxml的數(shù)據(jù)夠多的時(shí)候，當(dāng)向上滑動(dòng)觸到底的時(shí)候，就會(huì)觸發(fā)該方法

2.3配置上拉觸底距離

上拉觸底指的是觸發(fā)觸底事件，滾動(dòng)條距離頁(yè)面底部的距離。

可以在全局或者頁(yè)面的.json配置文件中，通過(guò)onReachBottomDistance屬性來(lái)配置上拉觸底的距離

小程序默認(rèn)的觸底距離是50px,在實(shí)際開(kāi)發(fā)中，可以根據(jù)自己的需求修改這個(gè)默認(rèn)值。

{
  "onReachBottomDistance": 10
}

2.3配置上拉觸底案例

2.3.1

定義獲取隨機(jī)顏色的方法

在頁(yè)面加載時(shí)獲取初始值

渲染ui結(jié)構(gòu)并美化頁(yè)面效果

在上拉觸底時(shí)調(diào)用獲取隨機(jī)顏色的方法

添加loading提示效果

對(duì)上拉觸底進(jìn)行節(jié)流處理文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-742096.html

到了這里，關(guān)于【微信小程序】-—下拉刷新、上拉觸底事件詳細(xì)講解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！