微信小程序分页(超简单)

之前写过一个项目主要是tab切换后的列表的一个分页(用的是uniapp),现在用的是微信原生的,没有切换,纯粹的一个分页的功能

页面的初始数据
data:{
	list:[ ],
	pagesize:10,//每页展示的条数
	curpage: 1,//当前页数
	 count:1//总页数
}
1. 这里是一个方法(getList),调用接口  一般都需要   当前页数和每页展示的条数   所以调接口传参 
		 {
           pagesize: this.data.pagesize,
            pageNumber:this.data.curpage
          }
返回res
 var arr1 = this.data.list;//页面此时展示的l列表(数组)
 var arr2 = res.list;//后端返回的列表(数组)
  arr1 = arr1.concat(arr2);//合并两个数组
  this.setData({
                list: arr1, //合并后更新list
                count:res.pageCount,//后台返回的列表的总页数   如果后台未返回 你可以直接使用列表长度除以每一页的页数然后上摄入(比如 Math.ceil(1.2)  // 2 ),因为多出来的两条数据也是一页 比如103条数据每页展示10条,10.3 那就是11页
              })
              
2.在onload种调用此方法 获取初始页面
this.getList();

3.  页面上拉触底事件的处理函数
 onReachBottom: function () {
    if(this.data.curpage <= this.data.count ){//这里是为了当前页数大于小于总页数,否则会一直刷新
      var curpage = this.data.curpage*1+1//上滑一次就加载下一页 在当前页数加一  就是加载下一页
      this.setData({
        curpage:curpage//更新data重的页数
      })
      this.getList();//再次调用(获取下一页的数据)
    }else{
      wx.showToast({
        title: '暂无更多数据',//如果当前页数大于总页数则不会刷新并显示提示
        icon: "none"
      })
    }

  }



结束啦,如果有问题或者建议,欢迎提出~

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值