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

Posted Stroyer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp 微信小程序实现上拉分页相关的知识,希望对你有一定的参考价值。

在数据量较大时采用后端分页是常用的方法,与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();
},

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

以上是关于uniapp 微信小程序实现上拉分页的主要内容,如果未能解决你的问题,请参考以下文章

PHP结合Vue实现上拉分页

微信小程序 上拉触底分页

微信小程序 上拉触底分页

微信小程序海报 uniapp

微信小程序海报 uniapp

uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)