微信小程序分页（超简单）

之前写过一个项目主要是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"
      })
    }

  }



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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