仿淘宝上拉分页加载效果

使用uniapp仿淘宝上拉分页加载效果

 

一、首先在data中定义值

// 加载状态 0:上拉显示更多 1:加载中 2:没有更多数据 3:不显示
            loadingType: 3,
            contentText: {
                contentdown: '上拉显示更多',
                contentrefresh: '加载中...',
                contentnomore: '~没有更多数据了~'
            },

 

二、开始第一次查询

       //获取评论数据
        getRiderComment() {
            uni.showLoading({ title: '载入中...', mask: true });
            this.$http
                .get(`product/riderComment/queryRiderEvaluation`, {
                    params: {
                        riderEncryptionId: this.$store.state.riderInfo.riderEncryptionId,
                        count: this.indexList, // 条件参数：0: 全部 1:满意 2:不满意
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }
                })
                .then(res => {
                    if (res.data.code == 200) {
                        uni.hideLoading();
                        this.loadingType = 0;
                        // 数据为空时不提示
                        if (res.data.data.total == 0) {
                            this.loadingType = 3;
                        }
                        this.riderCommentList = res.data.data;
                        //没有数据执行
                        if (this.riderCommentList.commentList.length == res.data.data.total) {
                            this.loadingType = 2;
                            //关闭加载动画
                            uni.hideNavigationBarLoading();
                            return false;
                        }
                        uni.hideNavigationBarLoading();
                        //得到数据后停止下拉刷新
                        uni.stopPullDownRefresh();
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.data.msg,
                            mask: true
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

 

三、上拉加载分页查询

以methods同级定义onReachBottom（触发上拉加载）

//触发上拉加载
    onReachBottom() {
        //每触底一次 pageNum +1
        this.pageNum = this.pageNum + 1;
        if (this.loadingType != 0) {
            //loadingType!=0;直接返回
            return false;
        }
        // 上滑时底部显示 加载中...
        this.loadingType = 1;
        //显示加载动画
        // uni.showNavigationBarLoading();
        this.$http
            .get(`product/riderComment/queryRiderEvaluation`, {
                params: {
                    riderEncryptionId: this.$store.state.riderInfo.riderEncryptionId,
                    count: this.indexList, // 条件参数：0: 全部 1:满意 2:不满意
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
            })
            .then(res => {
                if (res.data.code == 200) {
                    //没有数据执行
                    if (this.riderCommentList.commentList.length == res.data.data.total) {
                        this.loadingType = 2;
                        //关闭加载动画
                        // uni.hideNavigationBarLoading();
                        return false;
                    }

                    // 循环添加数据
                    res.data.data.commentList.forEach(item => {
                        this.riderCommentList.commentList.push(item);
                        // item.unfold = false;
                    });
                    //将loadingType归0重置
                    this.loadingType = 0;
                    //关闭加载动画
                    // uni.hideNavigationBarLoading();
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.msg,
                        mask: true
                    });
                }
            })
            .catch(err => {
                console.log(err);
            });
    },

 

四、下拉加载提示

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

 

五、加载样式

.loading-text {
    height: 80upx;
    line-height: 80upx;
    font-size: 30upx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 30rpx;
    font-family: Arial, Helvetica, sans-serif;
}