经过一段时间的比较,个人觉得 better-scroll 是移动端最好用的滚动插件,但是在使用过程中发现,目前很多文章关于这个组件的使用写的过简单及阅读性不是很强,我结合了许多文章,最终才完成。所以趁此机会准备整理出来。(注:此篇文章只是简单的使用滚动,关于其组件复杂功能日后更新…)
引入组件
- 使用cdn
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>
// minify
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
- 使用npm包
npm install better-scroll -S # 安装带有所有插件的 BetterScroll
npm install @better-scroll/core # 核心滚动,如果仅为了滚动效果,只需要引入它即可
Html结构
<div class='wrapper'>
<div class='content'></div>
</div>
Css结构
.wrapper {
height:500px
overflow: hidden;
}
使用条件:
必须包含两个大的div,外层和内层div
外层div设置可视的大小(宽或者高)
内层div,包裹整个可以滚动的部分
内层div高度一定大于外层div的宽或高,才能滚动‘
外层div overflow属性不可缺少
Javascript 结构
<script>
import BScroll from '@better-scroll/core' // 我在项目中只是为了滚动效果
export default {
name: '',
updated () {
this.$nextTick(() => {
if (this.scroll === null) {
const wrapper = document.querySelector('.wrapper')
this.scroll = new BScroll(wrapper, { // 减少Dom更新
scrollY: true,
click: true,
useTransition: true
})
}
})
},
data () {
return {
scroll: null
}
},
</script>
这里要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略
有些人认为这个初始化函数需要写在Dom 创建完成之后,也就是mounted钩子函数。
但是我在实际操作的时候遇到一个问题:如果把new BScroll() 初始化函数写在mounted钩子函数里面,页面初始化加载的时候,组件不生效,只有切换页面再切回来后,方可生效(懂得大神指教一下!),最后我才决定把初始化函数放在uopdated 钩子函数里
第一次投稿,创文不易,如果你觉得不错,请点赞鼓励!!!内容有误地方还请指教,你们的言语将成为我的最大的动力!!!
在后续开发中,遇到一个问题,一直困扰着我,首次加载无法滚动,刷新页面就好了。直到看到佐宗兄的这篇文章后,立马恍然大悟
https://blog.csdn.net/weixin_46242909/article/details/114117224(地址我放这里了,如有侵权,立马删除,勿怪!)
注:这个情况个人而定,有很多方法,比如nextTick()的解决方案,只是在我的项目中,设置后还是无法滚动。