个人技术分享

uniapp列表分页需要做上拉加载更多

一、html和样式布局

data中定义的初始化数据:

html布局:

<scroll-view class="law_main" scroll-y="true" @scrolltolower="lower" lower-threshold="50" refresher-enabled
                :refresher-triggered="triggered" @refresherrefresh="onRefresh">
                <view v-for="(item, index) in dataList" :key="index" class="content">
                 {{写样式代码......}}
                </view>
            </scroll-view>

重要的函数:

    //上拉加载更多
            lower(e) {
                if (this.pageNum < this.totalPage) {
                    this.pageNum += 1;
                    //获取list列表接口
                    this.getData();
                }
            },
            //自定义上拉刷新
            onRefresh() {
                if (!this.triggered) {
                    if (this.isfreshing) return;
                    this.isfreshing = true;
                    if (!this.triggered) {
                        this.triggered = true;
                    }
                    this.showMoreData = false;
                    this.emptyData = false;
                    this.dataList = [];
                    this.pageNum = 1;
                    this.getData();
                }
            },
            //获取list数据
            getData() {
                let params = {
                    current: this.pageNum,
                    size: this.pageSize,
                };
                uni.showLoading({
                    title: "正在加载",
                });
                try {

                        //发送请求
                    exam.answerList(params).then((res) => {
                        if (this.pageNum == 1) {
                            this.dataList = res.data.records;
                            this.triggered = false;
                            this.isfreshing = false;
                        } else {
                            this.dataList = this.dataList.concat(res.data.records);
                        }

                        //这一步显示没有更多数据了...
                        // if (this.dataList.length == res.data.total && this.dataList.length > 20) {
                        //     this.showMoreData = true;
                        // }
                        res.data.total == this.pageSize ?
                            (this.totalPage = 1) :
                            (this.totalPage = parseInt(res.data.total / this.pageSize + 1));
                        if (!this.dataList.length) {
                            this.emptyData = true;
                            this.showMoreData = false;
                        }
                        uni.hideLoading();
                    });
                } catch (error) {
                    uni.hideLoading();
                }
            }, 

css样式: 

        .law_main {
            height: calc(100vh - 330rpx);
            overflow-y: scroll;
            padding-top: 80rpx;

            .content {
                width: 100vw;
                display: flex;
                color: #fff;
                font-size: 24rpx;
                line-height: 90rpx;
            }
        }