获取滚动条距离底部的距离
在项目中经常需要监听页面滚动条滚到底部,下面来总结一下:1.在微信小程序中可以使用bindscrolltolower这个事件bindscrolltolower: function () {//到底后要做的事情},2.vue里面先在mounted里面添加监听滚动条事件scrollBottommounted() {window.addEventListener('scroll', this.scrol
·
在项目中经常需要监听页面滚动条滚到底部,下面来总结一下:
1.在微信小程序中
可以使用bindscrolltolower这个事件
bindscrolltolower: function () {
//到底后要做的事情
},
2.vue里面
先在mounted里面添加监听滚动条事件scrollBottom
mounted() {
window.addEventListener('scroll', this.scrollBottom)
},
然后在scrollBottom里定义一些内容
scrollBottom() {
// 变量scrollTop为当前页面的滚动条纵坐标位置
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
// 变量 windowHeight 是可视区的高度
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
// 变量 scrollHeight 是滚动条的总高度
let scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
// 到底的条件
if (
scrollTop + windowHeight == scrollHeight
) {
//到底后要进行的操作
}
}
document.documentElement和document.body的区别
documentElement 对应的是 html 标签,body 对应的是 body 标签,
在w3c标准下,document.body.scrollTop是恒为0的,需要用document.documentElement.scrollTop来代替,所以需要进行一下判断。
可以到底后对分页数据进行请求
//pageIndex 当前请求的数据页码,初始为0
//totalPage 总页数
if (this.pageIndex < this.totalPage - 1) {
this.pageIndex += 1
this.getList() //请求数据
}
如果要防止多次触发。可以加个布尔值,初始为true,触发事件后设置为false,根据数据请求情况再还原为true。
更多推荐
已为社区贡献5条内容
所有评论(0)