您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

vue MintUI上拉分页加载更多 infinite 无限滚动

发布时间：2023-04-11 21:10:03编辑：雪饮阅读（）

其实这次的内容比较简单点，无限滚动一般常用于移动端。实际上也是分页的原理。
实际上这种的滚动里面的分页倒是其次，主要的是滚动的实现，像是滚动阈值等。
这里可以使用。那么在mint ui中具体使用如：
news2.vue
<template>
    <div id="news">
        这里是新闻列表页2
        <!---
            一个无穷滚动实例
            v-infinite-scroll定义触发了滚动时候所要执行的方法
 
            infinite-scroll-disabled定义了无限滚动是否触发，其值是在data中的一个值，默认为false
 
            infinite-scroll-distance定义了触发负载方法的距离阈值，好像单位是px吧。
 
            我个人理解就是比如距离底部还有多少时候开始触发，因为人手滚动不可能直接距离底部正好距离为0，
            肯定是有误差的，各种情况因素导致的误差，基本上是不可能距离为0的
 
            我觉得infinite-scroll-disabled相当于编程式控制是否滚动的接口请求，infinite-scroll-distance则是手动触发决定是否滚动的接口请求
        --->
        <ul
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
</template>
<script>
export default{
    data(){
        return {
            loading:false,
            list:[1],
        }
    },
    methods:{
        loadMore() {
                //触发滚动
                this.loading = true;
                //用延长执行时间的方式，模拟接口请求
                setTimeout(() => {
                        let last = this.list[this.list.length - 1];
                        for (let i = 1; i <= 10; i++) {
                        this.list.push(last + i);
                        }
                        //数据请求结束关闭滚动
                        this.loading = false;
                }, 2500);
        }
    }
}
</script>