better-scroll滚动失效（去哪网儿项目移动端）

better-scroll滚动失效（去哪网儿项目移动端）

之前在效仿做去哪网儿移动端的vue项目的时候有个使用better-scroll的环节，第一次使用的时候还是可以滚动的，刷新页面后却发现滚动失效了，寻找了好多方法，最终发现原因

先说解决方法：我按照视频的讲解，在生命周期函数mounted里面使用的better-scroll命令，将mounted换成updated就可以了。

解释：

先说一下better-scroll的工作原理（盗的网上的图），根据图像，父元素也就是绿色的wrpper是有固定高度的，父元素的第一个子元素，也就是黄的的content的高度随着内容的大小而撑开，只有当content的高度大于wrpper的高度的时候，才可以实现滚动效果，不然的话假如子元素的内容就那么点，自然不能实现滚动了。

这个项目这儿使用的是vue+vuex，当vuex的数据传过来之后，也就相当于content有了很多数据了，已经有足够的高度了，使用better-scroll就可以实现滚动了。但是之前使用mounted的时候，意思是渲染结束，这个渲染结束应该是本页面的数据渲染完成了，vuex的数据还没传过来，vuex的数据还没被渲染，此时的content的高度不够满足大于父元素的高度，实现不了滚动效果，将mounted改为updated就解决了这个问题。