微信小程序實現上拉加載下拉刷新

爲什麼需要上拉加載和下拉刷新？

需要上拉加載是因爲手機一屏已經裝不下產品經理天馬行空的想法了，當然也是我們想要看到更多的內容，所以上拉加載是一個 App 的必備。（簡陋的效果如下）

需要下拉刷新也是我們覺得現有的內容都看完了滿足不了心中的期望了，所以下拉試試，碰巧下拉看到了新的內容，很開心~（比上面的圖好看一些的效果圖如下）

上面兩張圖是在小程序中實現的上拉加載和下拉刷新效果圖。

在小程序中實現上拉加載和下拉刷新有兩種方式

第一種：使用小程序默認提供方法。

第二種：監聽 scroll-view 滑動到頂端和滑動到底端。

二者的實現各有優缺點：

第一種：小程序提供的方法，實現簡單便捷，但是在使用 scroll-view 之後會上拉加載和下拉刷新失去效果。下拉刷新樣式只有系統提供的 三個點閃動效果。而且上拉加載沒有樣式。

tip: 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發 onPullDownRefresh
tip: 若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能通過點擊頂部狀態欄回到頁面頂部

第二種：實現相對複雜，但是定製性高，可自由定製 加載的佈局。

第一種方式實現：使用小程序默認提供方法。

(1). 在xxx.json 中開啓下拉刷新，需要設置backgroundColor，或者是backgroundTextStyle ，因爲加載的動畫可能會是白色背景，會看不清。

{

"enablePullDownRefresh": true,

"backgroundColor": "#f0145a",

"backgroundTextStyle": "dark"

}

(2). 在 js 中處理邏輯

/**

   * 下拉刷新

   */

  onPullDownRefresh: function() {
    // 標題欄顯示刷新圖標，轉圈圈
    wx.showNavigationBarLoading()

    console.log("onPullDownRefresh");

    // 請求最新數據
    that.getData();

    setTimeout(() => {
      // 標題欄隱藏刷新轉圈圈圖標
      wx.hideNavigationBarLoading()

    }, 2000);

  },

  /**

   * 加載更多

   */

  onReachBottom: function() {

    console.log('onReachBottom')
}

第二種方式實現：監聽 scroll-view 滑動到頂端和滑動到底端。

scroll-view 組件的屬性文檔地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

wxml 僞代碼：

<scroll-view class="scroll-view" scroll-y bindscrolltoupper="refresh" bindscrolltolower="loadMore" >

  <view wx:if="{{refreshing}}" class='pull_to_refresh'>正在刷新...</view>

  <block wx:for="{{列表數據}}">
  </block>

  <view class="loadmore" wx:if="{{isHideLoadMore}}">
    <text>{{loadingDesc}}</text>
  </view>

</scroll-view>

js 僞代碼：

//下拉刷新監聽函數
refresh: function() {
    wx.showNavigationBarLoading() 

    that.setData({
      refreshing: true,
    });
    console.log("下拉刷新開始");
    // 請求數據
    that.getData();

    setTimeout(() => {
      wx.hideNavigationBarLoading() 
      // 隱藏下拉刷新的佈局
      that.setData({
        refreshing: false,
      });
    }, 2000);
},

//加載更多監聽函數
loadMore: function() {

    //判斷是否全部加載完成，顯示不同的文本 loadingDesc 

    setTimeout(function() {

      that.setData({
        // 加載到最後一條可設置一直顯示
        isHideLoadMore: false,
        // 加載到最後一條顯示提示文本
        loadingDesc: '到底了~'

二者結合：

滑動到頂端顯示三個點下拉刷新，上拉加載使用自定義的

這裏用到 wx.startPullDownRefresh(); API，主要就是監聽 scroll-view 的滑動，當滑動到頂部的時候調用 wx.startPullDownRefresh(); 當滑動到底部調用我們自定義的 loadingMore

startPullDownRefresh 文檔地址
https://developers.weixin.qq.com/miniprogram/dev/api/wx.startPullDownRefresh.html

js僞代碼如下：

//下拉刷新監聽函數
refresh: function() {
    // 開啓下拉刷新
    wx.startPullDownRefresh();
    wx.showNavigationBarLoading() 

    console.log("下拉刷新開始");
    // 請求數據
    that.getData();

    setTimeout(() => {
      wx.stopPullDownRefresh() //停止下拉刷新
      wx.hideNavigationBarLoading() 
      // 隱藏下拉刷新的佈局
      that.setData({
        refreshing: false,
      });
    }, 2000);
},

//加載更多監聽函數
loadMore: function() {
    //判斷是否全部加載完成，顯示不同的文本 loadingDesc 
    setTimeout(function() {
      that.setData({
        // 加載到最後一條可設置一直顯示
        isHideLoadMore: false,
        // 加載到最後一條顯示提示文本
        loadingDesc: '到底了~'
     }）

總結：

最好是封裝成一個加載組件，方便引用。

1. 單個頁面，且對刷新樣式沒要求，使用系統頁面提供的方法

2. 下拉刷新，上拉加載樣式都改變，使用 scroll-view 組件監聽滑動

3. 系統下拉刷新，自定義上拉加載，1、2結合使用