vue-seamless-scroll到底事件
时间: 2023-08-27 22:06:54 浏览: 85
vue-seamless-scroll插件没有提供到底事件,但是可以通过监听滚动事件和计算元素高度来实现到底事件。
示例代码:
```
<template>
<div ref="scrollContainer" @scroll="handleScroll">
<div ref="scrollContent">
<!-- 内容 -->
</div>
</div>
</template>
<script>
export default {
mounted() {
this.contentHeight = this.$refs.scrollContent.offsetHeight;
this.containerHeight = this.$refs.scrollContainer.offsetHeight;
},
methods: {
handleScroll() {
const scrollTop = this.$refs.scrollContainer.scrollTop;
if (scrollTop + this.containerHeight >= this.contentHeight) {
// 到底了,触发事件
this.$emit('scroll-bottom');
}
}
}
}
</script>
```
在组件中监听滚动事件,计算元素高度,当滚动到底部时触发事件。可以通过`$emit`方法向父组件传递到底事件。
阅读全文