小程序分页实现

#小程序

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！