vue中如何优雅地自己写无限滚动
2019-05-17 本文已影响21人
辉夜真是太可爱啦
一般移动端的分页就是下划到底部的时候,进行接口的请求,然后请求第二页的数据,将第二页的内容和第一页进行拼接。
首先,在根目录的src
文件夹下新建一个utils
文件夹,一般这个文件夹下用于存放公用的方法,新建一个common.js
,写入以下内容,export
是将方法抛出,这样子相当于这三个方法随调随用,增加程序的解耦性
//滚动条在Y轴上的滚动距离
export function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//文档的总高度
export function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
//浏览器视口的高度
export function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
然后在你需要使用无限滚动的页面中进行引入
import {getScrollHeight,getScrollTop,getWindowHeight} from "../../utils/function";
接下来,在mounted
生命周期中进行window.onscroll
的事件监听,当滚动的时候就判断是否到底部,到底部就自动加载数据,切记不能写在created
中,因为在created
生命周期中还没有window
这个对象。
mounted(){
let vm=this;
window.onscroll = function(){
if(getScrollTop() + getWindowHeight() == getScrollHeight()){ //此时滚动条已经下拉到底部啦
vm.getList(); //拉取数据的方法
}
};
},
当然,在接口的调用中也要判断是否是第一页,如果不是第一页,不能覆盖当前的list
数组,需要进行拼接,这样子就可以完成接口的无限滚动啦。
if(this.pageNum===1){
this.list=res.data.result.list;
}else{
for(let i in res.data.result.list){
this.list.push(res.data.result.list[i]);
}
}