better-scroll使用的坑与心得

今天第一次使用better-scroll，折腾了两个小时，滚动效果始终不行。
先上官网地址：https://github.com/ustbhuangyi/better-scroll

一，滚动失效原因

1，先确认安装了better-scroll，并且成功引入：

确认安装：

引入：值得注意的是官网中这个“BScroll”前两个字母是大写的，后续要统一，很多文章中的代码只有B是大写。

import BScroll from '@better-scroll/core'

2，保证滚动的html结构正确

官网的结构是：

也就是说better-scroll它只给第一个标签（就是class="content"那个ul）添加滚动效果，所以滚动的内容统统都要放置在这里面

3，保证wrapper的高度小于content的高度

这里要说明它滚动的原理，就需要悄咪咪地盗用一下这张图:

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。
审查元素看高度也好，打印scroll对象查看高度信息也可以：

mounted() {
			this.scroll = new BScroll(this.$refs.wrapper, {})
			console.log(this.scroll)
		}

1256>600，这个条件是满足的

4，wrapper需要设置一些特定的样式

position: absolute;
left: 0;
top: 0;
overflow: hidden;

最主要的就是overflow hidden!

5,可以查看content的样式，这个插件的样式毕竟是添加在它身上的。

我的没出现！！心好痛，然后我鼠标滚轮怎么滚都不行。这是一个悲伤的故事！！待会说~~

6，滚动失效还有一种原因，就是添加滚动样式的时机不对

正确的时机应该是等页面的元素都渲染完毕之后。
所以需要放置在vue的生命周期函数之中。

但是有些时候还不行，那就把它整成异步，放在setTimeout里面。

	setTimeout(()=>{
				this.scroll = new BScroll(this.$refs.wrapper, {})
			},20)

当然，整成异步，vue提供了一个方法：Vue.$nextTick()

<script>
	import BScroll from '@better-scroll/core'
	export default{
		mounted() {
			 this.$nextTick(() => {
				this.scroll = new BScroll(this.$refs.wrapper, {})
			})
		}
	}
</script>

在排查了近两个小时之后，我快绝望了。为啥我还是滚动不了。正当我痛哭流涕以头抢地之时，不再使用滚轮滚动，而是长按鼠标滑动时！居然居然！居然阔以惹！！！
原来我写的都是对的！！
只是better-scroll插件使用之后，默认移动端是鼠标按住不放才能滑动！而不是用鼠标滚轮滚动！！
这特么！！！？？？？
然后content的样式也是在滑动之后才出现：

我没有哭！！！！

二，页面刷新之后，滚动又失效。修改代码保存时的自动刷新却有效

这个明显是因为创建better的时机不对。创建better的时机一定要在异步请求都完成以后,页面渲染完毕了，才进行对better-scroll的初始化.如果不这样做的话,better-scroll无法正确取到content的高度.从而无法实现滚动.
那何时才是页面渲染完毕呢？
我用的vue结合vuex,刚开始我在vue的生命周期函数mounted里面定义了创建better-scroll的命令。就发生了标题的问题，一刷新浏览器就失效。
所以我就想，会不会是mounted说的渲染结束，是不是仅仅是本页面的数据渲染完毕，而vuex中传过来的数据还没有被渲染，导致的content高度不足导致的失效。
于是我写了这段代码：

然后刷新页面：

这下问题就明了，在mounted的函数中，content的高度下明显会失效。接下来，只要把创建better-scroll放在updated中就行了