防止window.scroll多次执行调用
防止window.scroll多次执行调用在移动端网站开发过程中,经常会用到上拉加载分页数据,这是会通过监听滚动事件来实现。(在ios上滚动事件会被频繁请求)jsvar vum = new Vue({el: "#List",data: {pageIndex:1,pageSize:10,list:[],...
·
防止window.scroll多次执行调用
在移动端网站开发过程中,经常会用到上拉加载分页数据,这是会通过监听滚动事件来实现。(在ios上滚动事件会被频繁请求)
js
var vum = new Vue({
el: "#List",
data: {
pageIndex:1,
pageSize:10,
list:[],
isTrue: false
},
methods: {
handleScroll: function() {
var that = this;
//判断滚动到底部
if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
if (that.isTrue) {
setTimeout(function() {
that.pageIndex++;
that.getList();
}, 1000);
that.isTrue = false;
}
}
},
getList: function() {
//
//.....
//
this.isTrue = true;
},
},
//初始化加载
mounted: function() {
//监听滚动
window.addEventListener('scroll', this.handleScroll);
}
})
当上拉触底的时候会调用handleScroll方法,这时会通过一个变量isTrue来判断是否获取下一页数据,并在获取数据之后再给isTrue设置为true
更多推荐
已为社区贡献4条内容
所有评论(0)