java 滚动加载_手机滚动加载

Vue项目，h5实现手机端滚动加载。不用第三方插件

mounted(){

window.addEventListener('scroll',this.handleScroll);

},

methods:{

handleScroll(e){

function getViewportSize(w){

//使用指定的窗口， 如果不带参数则使用当前窗口

w = w || window;

//除了IE8及更早的版本以外，其他浏览器都能用

if(w.innerWidth != null)

return {w: w.innerWidth, h: w.innerHeight};

//对标准模式下的IE(或任意浏览器)

var d = w.document;

if(document.compatMode == "CSS1Compat")

return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};

//对怪异模式下的浏览器

return {w: d.body.clientWidth, h: d.body.clientHeight};

}

var documentHeight = document.documentElement.offsetHeight;

var viewPortHeight = getViewportSize().h;

var scrollHeight = window.pageYOffset ||

document.documentElement.scrollTop ||

document.body.scrollTop || 0;

if(documentHeight - viewPortHeight - scrollHeight < 20){

//加载数据

var obj={

"id": 159,

"name": "Hello"

};

this.dataList.push(obj);

}

}

}

暂时写到这里，

1.如果时ajax请求获取数据，需要一个sentStatus的变量，发送请求。设置为true。

当sentStatus=true时，不会触发ajax请求。

2.是否要增加计时器，限制为1s只能触发一次。

转载至链接:https://my.oschina.net/zhangyafei/blog/1830246