better-scroll简单使用

我们需要做竖向滚动,大家可以看一下滚动原理
为了更直观 我们看下一张图

竖向滚动时 滚动部分始终要高于父容器部分(即绿色区域)，这样才会有滚动条。
better-scroll常用解构:
我们需要设置需要滚动的父元素即 “wrapper” ,它会有固定的高度且需要设置样式overflow:hidden。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。(注意这里的高度是指元素实体高度并非视图高度),视图高度不能高于父元素。现在原理弄清楚了那么我们开始看代码。

需要滚动的是蓝色区域那么按上面解释的话他应该是父级元素下第一个子元素,那么他的父级就是 swiper
设置如下样式 .swiper { height: 100%; position: fixed; overflow: hidden;}
因为我的滚动区域是有top和底部导航栏的存在(各为50px),所以我在计算滚动区域的元素是高度减去了二者的高度(100% - 100px);所以此时滚动区域元素高是小于父级元素的,至此滚动才能生效。