美文网首页程序员
简单实现小程序上拉数据加载状态的思路

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

作者: Rollover | 来源:发表于2019-10-09 22:27 被阅读0次

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

    上图瀑布流的效果我是用第三方组件库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组件

    相关文章

      网友评论

        本文标题:简单实现小程序上拉数据加载状态的思路

        本文链接:https://www.haomeiwen.com/subject/qxmupctx.html