1.前言

小程序分頁和下拉刷新時一個最常用的功能，實現起來也不是很難，我這里就使用一個偽代碼方式來實現，最主要的是這個思路

2.實現

// pages/zhibo/zhibo.js
var app = getApp();
var wechatUtil = require('../../utils/wechatRequest.js');
var apiUtil = require('../../utils/apiRequest.js');

var liveroom = require('../../utils/liveroom.js');
var getlogininfo = require('../../getlogininfo.js');

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    user: app.globalData.user,
    userInfo: app.globalData.userInfo,
    pageNumber:1,
    pageSize:5,
    roomList:[],

  },


	/**
	*加載函數
	*/
  onLoad: function () {
    var that = this;
	//調用加載數據的方法
    that.loadRooms();
  
  },

  /**
	 * 生命周期函數--監聽頁面初次渲染完成
	 */
  onReady: function () {
 
  },


  /**
   * 加載直播間
   */
  loadRooms:function(res){
    var that = this;


    //獲取分頁信息
    var pageNumber = that.data.pageNumber;
    var pageSize = that.data.pageSize;

    //發送請求
    wechatUtil.req(url,{
      "pageNumber":pageNumber,
      "pageSize":pageSize
    },function(res){
      if(res.resultCode == 200){
		//返回成功
        var roomList = that.data.roomList;
        var reqRooms = res.resultContent;

        //如果返回數據為空，則提示
        if(reqRooms.length == 0){
          wx.showToast({
            title: "沒有更多的數據了...",
            icon: 'fail',
            duration: 1000
          });

          //分頁失敗，分頁數據減1
          if(pageNumber > 1){
            that.setData({
              pageNumber:--pageNumber
            });
          }
          return;
        }

        //如果分頁數據不為空，則將新的分頁數據追加到原數據智商
        that.setData({
          roomList: roomList.concat(reqRooms)
        });

      }else{

        //如果數據加載失敗，則提示
        wx.showToast({
          title: "加載數據失敗",
          icon: 'fail',
          duration: 1000
        });

        //分頁失敗，分頁數據回退
        if (pageNumber > 1) {
          that.setData({
            pageNumber: --pageNumber
          });
        }
      }
      console.log(res);
    })

  },

  /**
   * 上拉分頁
   */
  onReachBottom: function () {

	//上拉分頁,將頁碼加1，然后調用分頁函數loadRoom()
    var that = this;
    var pageNumber = that.data.pageNumber;
    that.setData({
      pageNumber:++pageNumber
    });

    setTimeout(function () {
      wx.showToast({
        title: '加載中..',
      }),
      that.loadRooms();
      that.setData({
        title: "數據加載完畢"
      })
    }, 1000)
  },

/**
 * 頁面相關事件處理函數--監聽用戶下拉動作
 * 下拉刷新
 */
  onPullDownRefresh: function () {
    var that = this;
    //下拉刷新，將pageNumber和pageSize分別設置成1和5，并初始化數據，讓數據重新通過loadRoom()獲取
    that.setData({
      pageNumber: 1,
      pageSize: 5,
      roomList:[]
    })
    that.loadRooms();
    wx.stopPullDownRefresh();
  },

})
wx.setNavigationBarColor({
  frontColor: '#000000',
  backgroundColor: '#DCC690',
})

3.后記

寫得比較潦草，大概就是一個這樣的思路：

1. 在data中設置好分頁數據,pageNumber和pageSize
2. 寫好請求后臺的分頁函數，分頁請求的數據最重要的是pageNumber，把這個數據從data獲取
   • 如果獲取到了分頁數據的話，則分頁數據+1，并將得到的數據追加到原來的數據上
   • 如果沒有獲取到分頁數據，則分頁數據-1
3. 如果下拉分頁的話，則主要邏輯就是分頁數據+1，然后調用分頁函數得到數據
4. 如果上拉刷新的話，則分頁數據重置，數據也重置
   思路大概是這樣

see you！