Vuetify 下拉获取 数据

测试代码

HTMl

		 <div>
		    <p v-for="(data,i) in dataarr">{{data.title}}</p>
                <!--Vuetify 加载动画-->
                <p class="loading pa-0">
                    <v-progress-linear value="1"
                                       color="indigo lighten-4"
                                       buffer-value="100"
                                       height="25"
                                       background-opacity="0.10"
                                       indeterminate
                                       rounded
                                       class="ma-0 pa-0 font-weight-bold"
                    >加载中
                    </v-progress-linear>
                </p>
		 </div>

JavaScript

 export default {
        name: "data",
        data() {
            return {
                dataarr: null,//数据对象数组
                pagenum: 1,//当前页
                time: '',//用于延时加载效果
                totalnum: 0,//总页数
                num: 0,//数组下标计数
            }
        }, created() { 
            this.getdataarr();
        },
        mounted() {
        // 增加监听页面滑动事件
            window.addEventListener('scroll', this.handleScroll);
        }, methods: {
            handleScroll() {
                //变量scrollTop是滚动条滚动时,距离顶部的距离
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //变量windowHeight是可视区的高度
                let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  
               /*4舍5入 取大 滚动巨鹿 + 可是区域高度 大于 滚动总高度*/ 
                if (Math.ceil(scrollTop + windowHeight) >= scrollHeight) {
                    //清空计时器
                    clearInterval(this.time);
                    this.time = null;
                    /*显示加载效果*/
                    $(".loading").show();
                    /* 效果 显示 时常 */
                    this.time = setInterval(this.getdataarr, 500);
                }
            }, getdataarr() { 
            	/*初始化 页面显示 数据*/
                if (this.pagenum === 1) { 
                    this.dataarr = [];
                    let newobj = {
                        title: "Vue Vuetify 实现页面下拉获取数据",
                        author: "Forever",
                        common_count: "193",
                        date: "2020-10-11"
                    };
                    //向数组增加 对象
                    this.dataarr[this.num] = newobj;
                    // 当前页
                    this.pagenum =this.pagenum+this.num;
                    this.totalnum = 10;
                    this.num++;
                } else { 
               		 //获取下一页下拉数据
                    let newobj = {
                        title: "Vue Vuetify 实现页面下拉获取数据",
                        author: "Forever",
                        common_count: "193",
                        date: "2020-10-11"
                    };
                    newobj.title += this.num;
                    /*Vue 强制视图刷新  对象数组名  数组key 下标  value值*/
                    if (newobj) {
                        this.$set(this.dataarr, this.num, newobj);
                    }
                    //清除计时器
                    clearInterval(this.time);
                    this.pagenum =this.pagenum+this.num;
                    this.time = null;
                    //数组下标 当前页编号
                    this.num++;
                } 
                /*关闭 加载条*/
                $(".loading").hide(); 
            }
        }
    }