better-scroll解决滑动问题

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

当使用better-scroll时,会出现如下情况:

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

better-scroll解决滑动问题_第1张图片

2、分析原因

此时scrollerHeight = wrapperHeight,而能够滚动的必要条件就是,scrollerHeight > wrapperHeight 。

better-scroll解决滑动问题_第2张图片

3、解决办法

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

解决之后的效果图:

better-scroll解决滑动问题_第3张图片

你可能感兴趣的:(前端)