<template>
<div class="swapper" ref="swapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: "Scroll",
data() {
return {
bScroll: null,
}
},
props: {
probeType: {
type: Number,
default: 0
},
pullUpLoad: {
type: Boolean,
default: false
}
},
mounted() {
this.bScroll = new BScroll(this.$refs.swapper, {
// bs 的一些配置,开启 bs 的一些功能
probeType: this.probeType,
pullUpLoad: this.pullUpLoad,
click: true
})
// bs 滚动时 抛出 scroll 事件
this.bScroll.on('scroll', position => {
this.$emit('scroll', position)
})
// bs 滚动时 抛出 pullingUp 事件
this.bScroll.on('pullingUp', () => {
this.$emit('pullingUp')
})
},
methods: {
// 可以通过组件实例的 ref 属性调用这些方法
scrollTo(x, y, time = 300) {
this.bScroll && this.bScroll.scrollTo(x, y, time)
},
finishPullUp() {
this.bScroll && this.bScroll.finishPullUp()
},
refresh() {
// console.log('aaa')
this.bScroll && this.bScroll.refresh()
}
}
}
</script>
<style scoped>
</style>
vuejs 中 betterscroll 的简单使用
最新推荐文章于 2021-09-18 11:32:10 发布