better-scroll解决滑动问题

1、使用better-scroll时出现的问题

当使用better-scroll时，会出现如下情况：

用鼠标拖动时拖不动，使用滚轮可以滑动，但是上面的标题和tab栏都会滑动（这是我们不想要的结果）

2、分析原因

此时scrollerHeight = wrapperHeight，而能够滚动的必要条件就是，scrollerHeight > wrapperHeight 且scroll组件中有且只能有一个根元素。

3、解决办法

给#app和.wrapper(即better-scroll的容器)加上如下样式，两个样式可以分开写在对应的文件中，这里我写在了一起，因为这里渲染的时候是.wrapper是#app的子元素，从less的格式就可以看出来。这里的实现思路可以参考这篇文章，传送门。如果不这样，那么就会出现上图中的标题和tab栏都会滚动，而这不是我们想要的结果，这时候我们需要让better-scroll容器占满#app的剩余空间。

<style lang="less" scoped>
  #app {
    position: relative;
    height: 640px;
    > .wrapper{
      position: absolute;
      top: 88px;
      bottom: 0;
      width: 100%;
      overflow: hidden;
    }
  }
</style>

解决之后的效果图：