- 监听滚动事件,并且用$emit将自定义事件传递给父组件
- 根据position.y > 阈值 控制组件显示和隐藏(v-show);
<template>
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll';
export default {
name: "Scroll",
props: {
probeType: {
type: Number,
default: 0
},
pullUpLoad: false
},
data() {
return {
scroll: null
}
},
mounted() {
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: true,
pullUpLoad: this.pullUpLoad
});
this.scroll.on('scroll', (position)=> {
this.$emit('scroll', position);
})
this.scroll.on('pullingUp',() => {
this.$emit('pullingUp');
})
},
methods: {
scrollTo(x, y, time = 300) {
this.scroll.scrollTo(x, y, time);
}
}
}
</script>
<style scoped>
</style>