滚动加载指令,附源码和使用案例,可直接使用。
因项目中需实现滚动分页,但是使用v-infinite-scroll渲染时会触发,所以自己实现滚动加载指令来替代
通过监听滚动事件,判断滚动到最底部时,触发加载事件
如何判断是否滚动到最底部呢:
这里我们通过判断:容器内的滚动距离是否大于或等于,容器的内高度 减 容器自身的高度的差,如果满足,则认为已经滚动至底部
滚动距离 >= 子级高度 - 自身高度
v-load-more指令的代码实现:
directives: {
/* 通过判断 滚动距离 >= 子级高度 - 自身高度
如果为true则认为到达底部 */
loadMore: {
inserted(el, binding) {
el.addEventListener('scroll', function () {
if (el.scrollTop >= el.scrollHeight - el.clientHeight) {
binding.value()
}
})
}
}
},
附使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="list-container" v-load-more="loadMore">
<div>
<div class="list-item" v-for="(item, idx) in list" :key="idx">
{{item}}
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
list: 20,
},
directives: {
/* 通过判断 滚动距离 >= 子级高度 - 自身高度
如果为true则认为到达底部 */
loadMore: {
inserted(el, binding) {
el.addEventListener('scroll', function () {
if (el.scrollTop >= el.scrollHeight - el.clientHeight) {
binding.value()
}
})
}
}
},
methods: {
loadMore() {
this.list += 20
}
},
})
</script>
<style>
.list-container {
margin: 0 auto;
height: 500px;
width: 400px;
overflow-y: auto;
}
.list-item {
line-height: 60px;
text-align: center;
background: #ccc;
border-bottom: 1px solid #fff;
}
</style>