Vue 移动端上拉加载更多

lucide 2021-08-05 原文

HTML 中

<div class="authorization_box" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
         infinite-scroll-distance="10">
         <!-- 循环数据列表 -->
            <div class="list" v-for="(item,index) in datalist" :key="index">
                <div>{{item.beViewUserRealName}}</div>
            </div>
            <!-- 展示“正在加载、已无数据、加载失败” -->
            <div class="l-load">{{ loadTxt[loadKey] }}</div>
        </div>

JS 中

data() {
            return {
                page: 1,//当前页
                total: 0,//总数据数量
                pageSize: 10,//每页几个
                loadTxt: {
                    more: "正在加载...",
                    none: "没有更多了~",
                    err: "加载失败~"
                },
                loadKey: "none",
                datalist: [],//数据列表
            };
        },

mounted() {
            this.getWithdrawalList();//一进入页面就调用获取数据的方法
        },

methods: {
            getWithdrawalList() {
                var _this = this;
                this.loadKey = "more";//把展示改为"正在加载..."
                //调用获取数据的接口，这里是用封装的axios
                record({
                    "pageIndex": _this.page,
                    "pageSize": _this.pageSize
                }).then(res => {
                    if (res.data.code == 200) {
                        var info = res.data.content || null;
                        if (info) {
                            _this.total = info.count;
                            var data = info.list || [];
                            _this.datalist = _this.datalist.concat(data);
                            if (_this.total == _this.datalist.length) {
                                _this.loadKey = "none";
                            }
                        } else {
                            _this.loadKey = "err";
                        }
                    }
                });
            },
            loadMore() {
                let page = this.page;
                let size = this.pageSize;
                let total = this.total;
                let length = this.datalist.length;
                let num = page * size;
                if (num < total && num === length) {
                    ++this.page;
                    this.getWithdrawalList();
                }
            },
        }

CSS 中

.authorization_box {
        width: 100%;
        background-color: #f6f6f6;
        padding: 0.5rem 1rem 1rem;
    }
    .list{
        width: 100%;
        height: 2.5rem;
        border: 1px solid #ccc;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .l-load {
        text-align: center;
        font-size: 0.625rem;
        color: #aaa;
        margin-top: 1rem;
    }