微信小程序 - 下拉刷新、上拉加載

在小程序開發中使用下拉刷新和上拉加載很是多，好比經常使用的展現型首頁，而實現這個功能有兩種形式，第一種是使用 scroll-view 組件，第二種是不使用 scroll-view 組件而讓整個頁面刷新，那就分別都在此簡單分享下。

方法一

在 scroll-view 裏設定 bindscrolltoupper 和 bindscrolltolower 監聽頁面滑動到頂部和底部，調用兩個方法而後分別根據本身業務邏輯處理便可。

詳情見 scroll-view 組件

直接上代碼

注意使用豎向滾動時，須要給 <scroll-view/> 一個固定高度才能監聽滾動事件，經過 WXSS 設置 height 。

index.wxml

<!--index.wxml-->
<view>
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加載中...
        </loading>
    </view>
</view>

index.js

var url = "https://xxx";
var page = 1;
var page_size = 5;

// 請求數據
var loadMore = function (that) {
  that.setData({
    hidden: true
  });
  wx.request({
    url: url,
    data: {
      page: page,
      page_size: page_size,
    },
    header: {
        'content-type': 'application/json'
    },
    success: function (res) {
      var list = that.data.list ;
      for(var i = 0; i < res.data.data.length; i++){
          list.push(res.data.data[i]);
      }
      that.setData({
        list: list
      });
      page++;
      that.setData({
        hidden: false
      });
    }
  });
}

Page({
  data: {
    hidden: true,
    list: [],
    scrollTop: 0,
    scrollHeight: 0
  },

  onLoad: function () {
    //注意 scroll-view 必需要設置高度才能監聽滾動事件，須要在頁面的onLoad事件中給scroll-view的高度賦值
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
    loadMore(that);
  },

  //下拉加載
  bindDownLoad: function () {
    var that = this;
    loadMore(that);
  },

  scroll: function (event) {
    //該方法綁定了頁面滾動時的事件，這裏記錄了當前的 position.y 的值,爲了請求數據以後把頁面定位到這裏來。
    this.setData({
      scrollTop: event.detail.scrollTop
    });
  },

  //上拉刷新
  topLoad: function (event) {
    var that = this;
    //數據刷新
    page = 0;
    this.setData({
      page: 1,
      list: [],
      scrollTop: 0
    });
    loadMore(that);
  }
})

方法二

整個頁面的刷新，使用 onPullDownRefresh 和 onReachBottom 。可是在小程序裏，用戶頂部下拉是默認禁止的，咱們須要把他設置爲啓用，在 app.json 中的設置對全部頁面有效，在單獨頁面設置則對當前頁面有效。

詳情見 Page 頁面

有人說設置完以後能夠下拉，可是看不到圖標，須要再設置下拉 loading 樣式。

{
  "window":{
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true
  }
}

直接上代碼

下拉刷新  

// 下拉刷新  
  onPullDownRefresh: function () {
    // 顯示頂部刷新圖標  
    wx.showNavigationBarLoading();
    var that = this;
    wx.request({
      url: 'https://xxx',
      method: "POST",
      data:{
            page : page,
            page_size : page_size,
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
          moment: res.data.data
        });
        // 設置數組元素  
        that.setData({
          moment: that.data.moment
        });
        // 隱藏導航欄加載框  
        wx.hideNavigationBarLoading();
        // 中止下拉動做  
        wx.stopPullDownRefresh();
      }
    })
  },

上拉加載更多

//上拉加載
  onReachBottom: function () {
    var that = this;
    // 顯示加載圖標  
    wx.showLoading({
      title: '加載中...',
    })
    page++;;
    wx.request({
      url: 'https://xxx/'，
      method: "POST",
      data:{
            page : page,
            page_size : page_size,
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        // 回調函數  
        var moment_list = that.data.moment;
        for (var i = 0; i < res.data.data.length; i++) {
          moment_list.push(res.data.data[i]);
        }
        // 設置數據  
        that.setData({
          moment: that.data.moment
        })
        // 隱藏加載框  
        wx.hideLoading();
      }
    })

  },

參考以上例子就能夠下拉刷新、上拉加載， 示例僅提供一個思路，具體的實現須要開發者根據本身項目來定。

 

水平有限，如有問題請留言交流！

互相學習，共同進步 ：） 轉載請註明出處謝謝！