微信小程序分页加载数据以及一些深层导致的bug

原文链接：

https://developers.weixin.qq.com/community/develop/article/doc/000a2287318888d8a2b856e0750813

内容：

我们在开发小程序时，一个列表里难免会有很多条数据，比如我们一个列表有1000条数据，我们一下加载出来，而不做分页，将会严重影响性能。所以这一节，我们来讲讲小程序分页加载数据的实现。

可以看到我们每页显示10条数据，当滑动到底部时，会加载第二页的数据，再往下滑动，就加载第三页的数据。由于我们一共21条数据，所以第三页加载完以后，会有一个“已加载全部数据”的提示。

分页请求数据

我们第一步准备好了数据以后，接下来就来讲讲如何在js里做分页加载数据。
首先我们这里用到了小程序云开发数据库的知识点
1，get方法：获取云数据库数据
2，skip方法：跳过前面几条数据，请求后面的数据
3，limit方法：请求多少条数据。
比如下面这段代码,就是跳过前5条，请求从第6条开始往后的10条数据，就是请求6～15的数据，我们做分页加载也就是基于这个原理。

wx.cloud.database().collection("list")
      .skip(5) //从第几个数据开始
      .limit(10)

下面把我们index.js的完整代码贴给大家

let currentPage = 0 // 当前第几页,0代表第一页 
let pageSize = 10 //每页显示多少数据 
Page({
  data: {
    dataList: [], //放置返回数据的数组  
    loadMore: false, //"上拉加载"的变量，默认false，隐藏  
    loadAll: false //“没有数据”的变量，默认false，隐藏  
  },

  //页面显示的事件
  onShow() {
    this.getData()
  },
  //页面上拉触底事件的处理函数
  onReachBottom: function() {
    console.log("上拉触底事件")
    let that = this
    if (!that.data.loadMore) {
      that.setData({
        loadMore: true, //加载中  
        loadAll: false //是否加载完所有数据
      });

      //加载更多，这里做下延时加载
      setTimeout(function() {
        that.getData()
      }, 2000)
    }


  },
  //访问网络,请求数据  
  getData() {
    let that = this;
    //第一次加载数据
    if (currentPage == 1) {
      this.setData({
        loadMore: true, //把"上拉加载"的变量设为true，显示  
        loadAll: false //把“没有数据”设为false，隐藏  
      })
    }
    //云数据的请求
    wx.cloud.database().collection("list")
      .skip(currentPage * pageSize) //从第几个数据开始
      .limit(pageSize)
      .get({
        success(res) {
          if (res.data && res.data.length > 0) {
            console.log("请求成功", res.data)
            currentPage++
            //把新请求到的数据添加到dataList里  
            let list = that.data.dataList.concat(res.data)
            that.setData({
              dataList: list, //获取数据数组    
              loadMore: false //把"上拉加载"的变量设为false，显示  
            });
            if (res.data.length < pageSize) {
              that.setData({
                loadMore: false, //隐藏加载中。。
                loadAll: true //所有数据都加载完了
              });
            }
          } else {
            that.setData({
              loadAll: true, //把“没有数据”设为true，显示  
              loadMore: false //把"上拉加载"的变量设为false，隐藏  
            });
          }
        },
        fail(res) {
          console.log("请求失败", res)
          that.setData({
            loadAll: false,
            loadMore: false
          });
        }
      })
  },
})

wxml代码我就不放了，详细可以去看原文链接，这里主要说一下遇到的问题：

这是底下的评论，一开始还没看懂这个问题是什么原因，后来遇到了才发现是一个超级坑的问题！！

问题大概是这样：如果一个用户想取列表数据，如果数据数据量较少的时候才会被出现，数据好像只被获取了一次！进入页面的时候获取一次，退出页面再重新进去数据就不见了！根本的原因是把两个变量

let currentPage = 0 // 当前第几页,0代表第一页 
let pageSize = 10 //每页显示多少数据 

定义为了全局变量，在整个数据块有用，只要整个小程序没有被销毁，这俩数据就一直存在，并且没有重新赋值！每次调用都会在上一次的基础上查数据库！

这是我在底下评论的回答

整体思路解决掉变量作用域的问题，那么就把变量设为页面局部变量就好了

1、就是把变量放在data里面

2、或者是在show函数里面给两个变量重新赋值