小程序分页实现

本贴最后更新于 1920 天前,其中的信息可能已经水流花落

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!

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1090 引用 • 3467 回帖 • 297 关注
  • 小程序
    76 引用 • 218 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...