前言:vue项目中需要实现一个列表的无限滚动,引用的ui框架没有这个组件,就自己实现了个比较简单的无限滚动。
无限滚动的核心在于对滚动事件的监听,当我们监听到滚动条距离滚动区域底部一定的距离时,即加载下一页的数据,合并到当页的数据中,这样就可以实现一个简单的无限滚动了。
步骤:1.监听滚动条 > 2. 在监听事件里计算滚动条距离滚动区域底部的距离,当距离不足10像素时,则加载下一页数据
> 3. 组件销毁,清除监听器
// dom挂载完成后添加滚动区域的监听
mounted() {
this.scrollPanel = document.querySelector('.list-content')
this.scrollPanel.addEventListener('scroll', this.throttle(this.loadMore))
}
// 组件销毁时清除监听器
destroyed() {
this.scrollPanel.removeEventListener('scroll', this.throttle(this.loadMore))
}
methods: {
loadMore(e) {
const scrollTop = e.target.scrollTop // 已滚动到可视区域上方的高度
const clientHeight = e.target.clientHeight // 可视区域高度
const scrollHeight = e.target.scrollHeight // 滚动内容的总高度
if (scrollHeight - (scrollTop + clientHeight) <= 10) { // 不足10像素触发加载更多
this.loadData()
}
},
// 这里判断一下目前的数据量是否已经全部加载出来了,若已经加载完成则不再加载更多
loadData() {
if (this.totalCount > this.data.length) {
this.pageIndex += 1
this.getData()
}
},
// 节流函数,节省性能
throttle(fn, interval = 500) {
let run = true
return function() {
if (!run) return
run = false
setTimeout(() => {
fn.apply(this, arguments)
run = true
}, interval)
}
}
}
这个demo相当简单,因此也存在一些不足。比如下拉加载更多数据的前提是必须要有滚动条,没有滚动条则无法触发,若第一次加载的数据量正好撑满可滚动区域,这时候就无法下拉了。可以通过调整滚动区域的高度,或者监听onwheel(鼠标滚轮或触摸板滚动)事件,在该监听事件里实现加载更多
object.addEventListener("wheel", myScript);
另一个不足之处就是由于demo过于简单,加载更多数据时,没有动画过渡,界面效果过于生硬。
以后有时间再做优化吧,就这样。