betterscroll遇到的各种坑

1.首先安装better-scroll

	npm install better-scroll --sava

2在需要使用的页面，导入

	import BScroll from '@better-scroll/core'

3.然后在script代码中，加入

<script>
	import BScroll from '@better-scroll/core'
	export default {
	  	data() {
    		return {
      			scroll: null
   		 }
	  },
	  mounted() {
	    this.scroll = new BScroll(this.$refs.container, {
	      click: true
	    })
	  },

</script>

4.在页面的最外层套一层div并给个class和ref

	<div class="container" ref="container">
		<div>
		内容....
		</div>
	 </div>

5.给这个盒子加上定位

.container {
	  position: absolute;
	  top: 45px;
	  left: 0;
	  right: 0;
	  overflow: hidden;
	}

遇到的问题：

当时我觉得什么代码都没有问题，所有代码都写了，但页面就是拖动不了，定位也加了，只要给页面加上better-scroll，页面就不能动了

解决方法：

查了很多文档才发现问题所在

	 <div class="wrapper">
	    <ul class="content">
	      <li>...</li>
	      <li>...</li>
	      ...
	    </ul>
	 </div>

当 content的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动了，这就是 better-scroll 的滚动原理。

先理解其中的原理，去给content加个比wrapper更大的高度试试，页面就可以滚动了，

这个问题困扰了我好几个小时，也是在写样式的时候并不一定都会写高度，可能会出现某些不兼容，出现许多bug，大家可以去查阅文档，看看插件的使用说明，希望可以帮到大家