解决Vue使用better-scroll无法滚动的问题

如何解决Vue使用better-scroll无法滚动的问题

1. 首先确定content的高度要比wrapper要高。我们知道better-scroll的基本原理如图
   
2. 然后确定wrapper的CSS有设置overflow: hidden 以及高度 height
3. 如果以上情况都正确那么接下来我们使用插件
4. 安装依赖 npm install @better-scroll/observe-dom

import BScroll from '@better-scroll/core'
import ObserveDom from '@better-scroll/observe-dom'
BScroll.use(ObserveDom)

mounted:{
	const bs = new BScroll(this.$refs.wrapper,{
		observeDOM: true
	})
}
// 至于这里为什么会有this.$refs.swapper我给一个代码示例
<div class="wrapper" ref="wrapper">
  <div class="content">
    <slot></slot>
  </div>
</div>
 //当然 也可以按照官方文档的格式
 [better-scroll官方中文文档](https://better-scroll.github.io/docs/zh-CN/guide/use.html)

5. 此时再次查看自己的滚动，你会发现OK了！！！