加载更多---vue

可直接拿来用

<template>
    <div class="container">
        <div class="list">
            <ul
                class="list"
                v-infinite-scroll="load"
                infinite-scroll-disabled="disabled"
            >
                <li
                    v-for="(i, index) in countData"
                    :key="index"
                    class="list-item"
                >
                    {{ i }}
                </li>
            </ul>
        </div>
        <p v-if="loading && isFlag" @click="more" class="btn">
            查看更多
            <van-icon name="arrow-down" />
        </p>
        <p v-if="noMore && isFlag" class="btn">没有更多了</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: [
                "北京",
                "天津",
                "河北",
                "山西",
                "内蒙古",
                "辽宁",
                "吉林",
                "黑龙江",
                "上海",
                "江苏",
            ], // 数据列表
            cou: 4, //默认显示条数
            loading: false,
            isFlag: false,
            num: 4, //每次加载显示条数
        };
    },
    computed: {
        noMore() {
            // 判断加载条数是否大于列表数据长度
            return this.cou > this.count.length;
        },
        disabled() {
            // 加载完成
            return this.loading || this.noMore;
        },
        countData() {
            // 计算属性使用切片生成新数组
            let data = [];
            // 大于默认显示条数，使用切片slice，返回新数组
            if (this.count.length > this.cou) {
                data = this.count.slice(0, this.cou);
                return data;
            } else {
                // 否则使用原来数组，不进行切片处理
                data = this.count;
                return data;
            }
        },
    },
    mounted() {
        // 判断是否显示加载更多/没有更多了
        if (this.cou > this.count.length) {
            this.isFlag = false;
        } else {
            this.isFlag = true;
        }
    },
    methods: {
        load() {
            this.loading = true;
        },
        more() {
            // 每次点击加三条
            this.cou += this.num;
            this.loading = false;
        },
    },
};
</script>
<style scoped>
.container {
    width: 100%;
    text-align: center;
    overflow: auto;
}
.container .list {
    color: pink;
    margin-bottom: 0.3rem;
    margin-top: 3rem;
}
.btn {
    margin: 0 auto;
    font-size: 0.36rem;
    font-family: PingFang;
    font-weight: 500;
    color: #999999;
}
</style>

 知识点解析：

1、使用infinite-scroll-disabled在vue中下拉加载数据

2、Vue的vue-infinite-scroll插件----无限加载 

v-infinite-scroll="load" 表示回调函数是load()
infinite-scroll-disabled="disabled" 表示由变量disabled决定是否执行load()，false则执行load()，true则不执行。(具体见1)

相关网站：

vue-infinite-scroll使用笔记 - 简书

https://github.com/ElemeFE/vue-infinite-scroll