Vue 移動端 上拉加載更多

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;
    }