Vue Vuetify 实现 页面下拉 获取、更新数据 实例(详解)
Vue 教程 Vuetify 下拉更新页面数据 Vuetify 下拉获取页面数据 Vue UI框架Vuetify 及时获取数据 Vue tifu 实现 页面下拉获取数据 Vuefify 页面下拉更新·数据 页面下拉刷新数据 页面下拉获取数据
·
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();
}
}
}
更多推荐
已为社区贡献18条内容
所有评论(0)