Vue中使用better-scroll所遇到的若干问题

（better-scroll可适用于滚动列表、轮播图、索引列表、开屏引导、上拉加载、下拉刷新等应用场景）

最近在做一个基于Vue的webapp，用到了better-scroll这个插件，遇到一些常见的问题，把它总结一下：

首先在vue中使用better-scroll，第一步安装：

    执行命令：npm install better-scroll --S

    引入：import better-scroll from 'better-scroll'

better-scroll滚动原理：

  

    

      
...
      
...
      ...
    
  

（官方文档上扣下来的一张图，wrapper掉了一个a 忽略忽略...）

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

better-scroll初始化：

  vue中使用better-scroll要注意它的初始化必须在数据加载完成后，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。

参考文章：http://www.imooc.com/article/18232

                  https://segmentfault.com/q/1010000011950770/a-1020000011956816

                  https://juejin.im/post/59dc572c6fb9a0450f20e40e