实现上拉加载效果如下图所示:
上图瀑布流的效果我是用第三方组件库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组件
网友评论