移动端网页使用Vue实现页面分页功能
具体实现步骤:1.为页面添加滚动监听事件 (在mounted钩子函数中添加监听事件) mounted: function () { $(window).bind("scroll", this.Paging); //监听页面滚动 },2. 在methods选项中写分页方法methods: { Paging: fun...
具体实现步骤:
1.为页面添加滚动监听事件 (在mounted钩子函数中添加监听事件)
mounted: function () {
$(window).bind("scroll", this.Paging); //监听页面滚动
},
2. 在methods选项中写分页方法
methods: {
Paging: function () {//真实内容的高度
var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
//视窗的高度
var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
//隐藏的高度
var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
//如果满足触发条件,执行
if (pageHeight - viewportHeight - scrollHeight < 10) {
this.ListQuery();//查询方法
}
}}
- ListQuery() 是我自定义的查询方法,当页面滚动到低部时去查询列表的内容
完毕!!!
更多推荐
所有评论(0)