vue 封装一个滚动组件和使用自定义指令封装一个滚动触底触发回调指令（纵向滚动瀑布流）

方式一 、滚动组件

纵向滚动触发触底事件和触顶事件

<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属性，不然不会生效。

演示