简单实现小程序上拉数据加载状态的思路

实现上拉加载效果如下图所示：

上图瀑布流的效果我是用第三方组件库Lin-UI实现了，那么，我主要来说下我自己实现的流程，首先是获取数据，这里我一次性将所有数据保存到数组中。

• 1.数据导入：分批的将数据导入瀑布流中(在Page的data中定义一个skip变量来记住步长，每次步长加5，则从数组中取数据的伪代码为:

 const newData = this.data.加载的数据.slice(this.skip, this.skip+5))
 this.skip += 5

• 2.进入加载：为了防止重复加载带来的不好的体验，定义了一个标志位point，为true方可进入加载数据，默认为true，下面是伪代码：

if (this.point) {
    this.point = false
    ...
    执行完数据加载后，执行下面语句
    this.point = true
    ...
}

• 3.加载状态提示：在瀑布流组件中使用回调函数来显示加载状态，下面是伪代码：

wx.lin.renderWaterFlow(data, false, () => {
                    callback()
})

显示状态所用到的小程序的内置函数：

• 4.演示加载效果：为了有加载延时的效果，我采用了setTimeout函数

• 5.判断数据是否已经没有了：这里我采用了取余操作，只有步长大于了数据的长度，就显示没有更多数据了，伪代码如下：

const remainder = this.data.加载的数据.length % 5
if (this.skip > this.data.加载的数据.length + remainder) {
    wx.hideLoading()
    wx.showToast({
        title: "没有更多数据了",
        icon: 'none'
    })
}

当然这只是一个简单的实现，还可以更完善，如有更好方案，欢迎分享！

参考列表：Lin-UI组件