1、npm i better-scroll
2、创建一个Scroll的组件,进行封装
<template>
<div class=wrapper ref='myScroll'> //滚动前给特定的高度小于滚动内容的高度
<div class=content> //滚动内容
<slot></slot> //预留一个插槽,在需要滚动的页面引入Scroll组件并将需要滚动的内容放进插槽中
</div>
</div>
</template>
<script>
//引入better-scroll
import BScroll from 'better-scroll'
export default {
name: 'Scroll',
data() {
return {
scroll: null
}
},
mounted() {
this.scroll = new BScroll(this.$refs.myScroll,{
prototype: 3 // 实时监听滚动的位置
click:true//可以监听点击事件
pullLoadUp: true: //允许上拉加载
})
}
this.scroll.on('scroll',(position) => {
console.log(position) //监听页面滚动的位置
})
this.scroll.refresh() //刷新,滚动页面中有图片等资源时获取的scrollHeight不准确
//导致导致滚动出现bug,调用该函数更获取正确的scrollHeight
this.scroll.on('pullingUp',() => { //监听上拉加载 只能调用一次
this.scroll.finishPullUp() //结束此次的上拉加载,可以继续监听下一次
})
this.scroll.scrollTo(x,y,time) //经过time的时间滚动到(x,y)
}
</script>
vue中使用better-scroll插件总结
最新推荐文章于 2023-11-06 14:08:45 发布