1 下拉刷新

1.1 概念

手指在屏幕上下拉滑動操作，重新載入頁面數據的行為

1.2 啟動下拉刷新的方式

1.2.1 實現局部下拉刷新

1.3 配置下拉刷新視窗的樣式

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

• backgroundColor 視窗的背景顏色，僅支持16進位的顏色值
• backgroundTextStyle 下拉 loading 的樣式，僅支持 dark 和 light 字元串

message.jsop

{
    "usingComponents": {},
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark"
}

1.3.1 效果

1.4 監聽頁面的下拉刷新事件

通過頁面的.js文件中裡面的 onPullDownRefresh()函數實現。

1.4.1 案例：重置計數器

message.wxml

<view>count值是：{{count}}</view>
<button bindtap="addCount">+1</button>

message.js

    data: {
        count:0
    },

    addCount(){
        this.setData({
            count:this.data.count+1
        })
    },

    /**
     * 頁面相關事件處理函數--監聽用戶下拉動作
     */
    onPullDownRefresh() {
        this.setData({
            count:0
        })
    },

效果

1.5 停止下拉刷新的效果

當一鬆手時，能夠停止刷新，則要調用wx.stopPullDownRefresh()
message.js

    onPullDownRefresh() {
        this.setData({
            count:0
        })
        wx.stopPullDownRefresh()
    },

1.5.1 效果

2 上拉觸底事件

2.1 概念

手指在手機屏幕的上拉滑動操作，從而載入更多數據的行為

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

在頁面的.js文件中，通過onReachBottom()函數實現,註意要讓內容的長度高於頁面的高度才行。

2.3 配置上拉觸底距離

就是想要觸發上拉觸底事件的話，它會量你滾動條要距離頁面底部的距離才選擇觸發。

可以在.json配置文件中，通過 onReachBottomDistance 屬性配置，預設50px。