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

爲何須要上拉加載和下拉刷新？

須要上拉加載是由於手機一屏已經裝不下產品經理天馬行空的想法了，固然也是咱們想要看到更多的內容，因此上拉加載是一個 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 組件的屬性文檔地址：developers.weixin.qq.com/miniprogram…

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 文檔地址 developers.weixin.qq.com/miniprogram…

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. 系統下拉刷新，自定義上拉加載，一、2結合使用