uniapp 微信小程序实现上拉分页

Posted 2021-06-08 Stroyer

在数据量较大时采用后端分页是常用的方法，与PC端不同的是，移动端分页往往不借助分页条，而是向上滑动触发对下一页的请求。在小程序里，向上滑动会触发onReachBottom事件，在该事件里发起对下一页的请求即可。

首先在列表底部添加一个提示表现当前列表状态

<div class="loading-text">
     ----{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}----
</div>

// 默认值为 0
contentType: 0,

contentText: {
    contentdown: "上拉显示更多",
    contentrefresh: "正在加载...",
    contentnomore: "没有更多数据了"
}

contentText 有三种状态，

loadingType = 0 —— “上拉显示更多”

loadingType = 1 —— “正在加载...”

loadingType = 2 —— “没有更多数据了”

 样式：

.loading-text {
    margin-top: 15rpx;
    text-align: center;
    font-size: 26rpx;
    color: #999;
}

准备工作就绪！

首先在 onLoad 阶段请求列表数据

apiGetListData(this.page, this.rows).then(res => {
    let list = res.value.list;
        // 返回的数据等于请求的最大条数，表示下一页可能还有数据
    if (list.length == this.rows) {
        this.loadingType = 0;
    } else {
        // 返回的数据小于请求的最大条数，表示下一页没有数据了
        this.loadingType = 2;
    }
    this.list = list;
})

其中 apiGetListData 是封装好的 Pormise 请求，需要的参数为当前页码（默认值是 1）以及每页数据条数（这里要注意设置的数据条数一定要能触底，不然永远触发不了onReachBottom事件）。

接着当用户滑动列表，就要重新发起请求，page + 1，rows 不变，请求到的数据跟原始数据拼接。这时我们会发现与上面的请求有很多重复操作，因此可以改写一下封装个新方法。

getListData() {
    apiGetListData(this.page, this.rows).then(res => {
        let list = res.value.list;
        // 返回的数据等于请求的最大条数，表示下一页可能还有数据
        if (list.length == this.rows) {
            this.loadingType = 0;
        } else {
            // 返回的数据小于请求的最大条数，表示下一页没有数据了
            this.loadingType = 2;
        }
        // 如果没有数据返回说明已经返回完了，记录状态，不用拼接
        if(!coupons.length) {
            this.hasNoMoreData = true;
            return;
        }
        // 跟原始数据拼接
        this.list = this.list.concat(list);
    })
}

onReachBottom() {
    // 如果没有数据了不再继续请求
    if (this.hasNoMoreData) return;
    this.page++
    // 显示“正在加载...”
    this.loadingType = 1;
    this.getListData();
},

 至此，就完成了一个简单的小程序分页功能。