Vue中实现下拉加载
代码如下,使用时复制就完事了## 下拉加载created(){// 页面创建后先请求一次数据this.getDataList();},mounted(){// 监听页面滚动window.onscroll=this.pageScroll;},methods:{//请求数据方法getDataList(){axios.get(`请求路径`).then((res)=>{// console.lo
·
代码如下,使用时复制就完事了
## 下拉加载
created(){
// 页面创建后先请求一次数据
this.getDataList();
},
mounted(){
// 监听页面滚动
window.onscroll=this.pageScroll;
},
methods:{
//请求数据方法
getDataList(){
axios.get(`请求路径`).then((res)=>{
// console.log(res);
// 使用扩展运算符将新获取的数据添加至原数组
this.原数据=[...this.原数据,...res.请求到的数据];
})
},
// 页面滚动事件 常做下拉加载内容
pageScroll(){
// 获取滚动的距离
let scrollTop=document.documentElement.scrollTop;
// 获取滚动的高度(获取整个html的高度)
let scrollHeight=document.documentElement.scrollHeight;
// 获取屏幕(浏览器)高度
let clienHeight=document.documentElement.clientHeight;
// 滚动的距离 + 屏幕高度 - 内容高度 >= 0 表示滚动到底部了 (下拉加载判断条件)
if(scrollTop+clienHeight-scrollHeight >=0){
console.log("我到底了");
this.offset++;
//滚动至底部后请求数据
this.getDataList();
}
}
}
##
更多推荐
已为社区贡献5条内容
所有评论(0)