「小程序JAVA實戰」小程序頁面的上拉下拉刷新（50）

前已經完成了小程序的列表展現，可是對於上拉和下拉刷新這個功能，其實跟小程序的生命週期有關係，一塊兒回顧下完成，上拉和下拉刷新。源碼：https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15

回顧下 page的生命週期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

列表小程序端完成 上拉，下拉刷新功能

1. onReachBottom 上拉刷新
2. onPullDownRefresh 下拉刷新

• 須要在app.json的window選項中或頁面配置中開啓enablePullDownRefresh。
• 能夠經過wx.startPullDownRefresh觸發下拉刷新，調用後觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。
• 當處理完數據刷新後，wx.stopPullDownRefresh能夠中止當前頁面的下拉刷新。

const app = getApp()

Page({
  data: {
    // 用於分頁的屬性
    totalPage: 1,
    page: 1,
    videoList: [],
    screenWidth: 350,
    serverUrl: "",
  },

  onLoad: function (params) {
    var me = this;
    var screenWidth = wx.getSystemInfoSync().screenWidth;
    me.setData({
      screenWidth: screenWidth,
    });



    // 獲取當前的分頁數
    var page = me.data.page;
    me.getAllVideosList(page);
  },

  getAllVideosList:function(page){
    var me = this;
    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: '請等待，加載中...',
    });


    wx.request({
      url: serverUrl + '/video/showAll?page=' + page,
      method: "POST",
      success: function (res) {
        wx.hideLoading();
        wx.hideNavigationBarLoading();
        wx.stopPullDownRefresh();

        console.log(res.data);

        // 判斷當前頁page是不是第一頁，若是是第一頁，那麼設置videoList爲空
        if (page === 1) {
          me.setData({
            videoList: []
          });
        }

        var videoList = res.data.data.rows;
        var newVideoList = me.data.videoList;

        me.setData({
          videoList: newVideoList.concat(videoList),
          page: page,
          totalPage: res.data.data.total,
          serverUrl: serverUrl
        });

      }
    })
  },

  onPullDownRefresh: function (params) {
    var me = this;
    wx.showNavigationBarLoading();
    me.getAllVideosList(1);

  },

  onReachBottom: function (params){
    var me = this;
    var currentPage = me.data.page;
    var totalPage = me.data.totalPage;

    //判斷當前頁數和總頁數是否相等，若是相同已經無需請求
    if (currentPage == totalPage){
      wx.showToast({
        title: '已經沒有視頻啦~',
        icon:"none"
      })
      return;
    }
    var page = currentPage+1;
    me.getAllVideosList(page);

}


})

複製代碼

PS：上拉刷新不須要作任何的配置，下拉刷新須要開啓配置，每次請求建議開啓 wx.showNavigationBarLoading() 和 wx.hideNavigationBarLoading(); 配合使用。