方式一 、滚动组件
纵向滚动触发触底事件和触顶事件
<template>
<div @scroll="scrollHandle">
<slot></slot>
</div>
</template>
<script>
export default {
name:'Scroll',
methods: {
scrollHandle(e) {
if(e.target.scrollTop+e.target.clientHeight>=e.target.scrollHeight){
this.$emit("scrollToLower")
}
if(e.target.scrollTop===0){
this.$emit("scrollToUpper")
}
}
},
}
</script>
<style scoped>
</style>
方式二、自定义v-scroll指令
1、指令
const scrollTolower = {}
scrollTolower.install = (Vue) => {
Vue.directive("scroll", (el,val) => {
el.onscroll = () => {
if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
const scrollToLower = val.value
scrollToLower()
}
}
})
}
export default scrollTolower
2、main.js引用
import scrollToLower from './plugin/scrollToLower'
Vue.use(scrollToLower)
3、定义触底回调
<div class="v-scroll-my" v-scroll="callback">
<div v-for="item in 100" v-text="item"></div>
</div>
method中定义callbac回调函数
callback() {
console.log("触底了v-scroll");
},
注意纵向滚动时必须设置元素的height属性,不然不会生效。