小程序分页实现（简单使用）

1. 功能：

下拉刷新，小程序分页（商品列表，视频列表…）常用！！

2. 思路：

1. 在 data 中定义 page(页码)，pageSize(每页个数)，isEnd(标记是否加载完)
2. 分页函数，请求新数据，追加到老数据(concat)
3. 何时追加? 何时停止追加?
4. 有新数据，追加；没有新数据，停止追加，且标记 isEnd = true (加载完)
5. 小程序 onReachBottom() {} /** 页面上拉触底事件的处理函数 */
6. 判断 isEnd，是否加载完全；没有加载完，++page，调用分页函数，反之无需操作

3. 实现：

data: {
	lists: [], // 要循环的数据列表
	page: 0, // 初始页码
	pagesize: 10, // 每页十条数据，可根据实际修改
	isEnd: false, // 是否加载完毕
},

onLoad(options) {
	this.loadLists() // 加载数据
},

loadLists(){
    httpGet('/api/list',{
      page: this.data.page,
      pagesize: this.data.pagesize
    }).then(res => {
      let reqList = res.data // 新数据
      let oldList = this.data.videos  // 旧数据
      
      // 新数据长度为 0 的时候便是最后一页
      if (reqList.length === 0) {
        wx.showToast({
          title: '没有更多数据了',
          icon: 'none',
          duration: 2000
        })
        this.setData({
          isEnd: true // 所有数据加载完毕
        })
        return
      }
      // 赋值
      this.setData({
        lists: oldList.concat(reqList) // 新数据拼接到旧数据
      })
    })
  },
  
/** 页面上拉触底事件的处理函数 */
onReachBottom() {
    console.log('===触底了！！===');
    let page = this.data.page
    
    // 数据是否全部加载完毕
    if (!this.data.isEnd) {
      this.setData({
        page: ++page
      })
      setTimeout(()=>{
	    this.loadLists() // 加载新数据
      }, 500)
    }
  },
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
44
45
46
47
48
49
50
51
52
53

4. 注意点：

若页面内有 tab 切换，同一数据列表，切换时需清空须 重置页码，重置列表数据！！！