在vue中封装betterscroll+解决betterscroll封装使用后在浏览器可以滚动但发布到手机上却不能滚动的问题

如果对于betterscroll插件还不了解的可以参考BetterScroll：可能是目前最好用的移动端滚动插件

在vue中使用betterscroll、betterscroll的滚动原理以及scroll组件的封装可参考当 better-scroll 遇见 Vue

目录

一、在vue中封装betterscroll

1、创建一个scroll.vue

2、在父组件中使用scroll

二、出现浏览器滚动但手机上不能滚动的问题

---

 

---

由于网上对于vue中关于betterscroll的使用没有经过封装而是直接使用的，这里使用better-scroll在vue中封装自己的scroll组件

一、在vue中封装betterscroll

1、创建一个scroll.vue

2、在父组件中使用scroll

使用better-scroll(即封装后的scroll组件)，必须将滚动的内容全部放在第一个子元素div里

并添加样式（一定要记住是给scroll组件添加样式，这样才能保证content的高度大于wrapper的高度，这里的top与bottom属性根据实际添加修改，因为我这里的页面有顶部top和底栏tabbar，所以这里留了一定像素）

至此成功引用了封装的scroll组件

二、出现浏览器滚动但手机上不能滚动的问题

在浏览器可以滚动，在手机上不能滚动，首先要知道这里存在一个兼容性问题，在浏览器查看的时候看看是否使用的是iPhone手机模式，因为在iPhone手机上可能可以滚动，但在安卓手机上就不一定可以滚动了。其次要实现在手机上滚动，在浏览器端查看的时候应该鼠标按住拖动才是手机上滚动的方式，而不是直接滑动鼠标滚轮，所以要注意这里，在浏览器上滚动的很爽，可手机上是不能滚动的。另外如果要测试在安卓手机上是否可以滚动的话应该调整至pixel2的模式。

如果按照上面的步骤使用scroll并添加了样式，应该可以滚动的。如果不能滚动，首先在封装betterscroll的scroll.vue文件的mounted函数中添加下列代码。

this.$nextTick(() => {
    if (!this.scroll) {
	this.scroll = new BScroll(this.$refs.wrapper, {})
	console.log(this.scroll)
    }
 })

运行后，这时候浏览器右键检查，可以看到打印结果BScroll，注意观察三个属性hasVerticalScroll、scrollHeight和wrapperHeight的值

滚动的情况下，应该是wrapperHeight的值 < scrollHeight的值，并且hasVerticalScroll为true。如果打印出来的hasVerticalScroll为false并且wrapperHeight的值 = scrollHeight的值，这时候是不能滚动的。这时候应该留意样式，scroll组件position一定要设置成absolute，并且overflow设置成hidden，如果还是不行，从三个方面找原因：可以试试修改top的值（我这里top设置为0的时候也不能滚动），可以看看scroll父元素的position是否为fixed，可以在scroll上绑定数据:data="playList"  ，表示传一个playList数据进来，是因为当数据发生改变时，滚动条也需要refresh刷新。

如果可以滚动，样式改变了，调整下宽度width为100%。

但这里还遗留的一个问题是，浏览器上刚进入页面的时候不能滚动，只有刷新一次页面后才能进行滚动。但好像在手机上没有出现这个问题。。。

具体可参考better-scroll滚动无效 几种原因