better-scroll 不滚动原因总结

1: 为什么要使用 better－scroll ？

封面

解：（1）体验像原生：滚动非常流畅，而且没有滚动条。

       （2）BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件。有下列功能支持滚动列表，下拉刷新，上拉刷新，轮播图，slider等功能。

2: 我们学习它，想要达到什么样目的？

解：能够在项目中的实现列表、弹出框滚动效果等等。

demo.jpg

3: 那我们学习过程中注意什么？

解：这个就是我想跟大家讲的几个易错点，希望可以节约大家找问题的时间，快速找到问题。

易错点，快速定位问题：

html 结构：外层 .list-wrappe  包裹  内层 info-list , 里面只有一个子元素。

html结构

css代码：外层.list-wrappe  如果是横向滚动就要限制宽度，垂直滚动就要限制高度，然后overflow: hidden.   

css代码

js 代码部分

js代码

初始化问题：检查上面的相关设置是否已做好，初始化会在内层即滚动层进行滚动的相关的style设置

初始化style设置内层

初始化成功了，还不能滚动。考虑计算高度出错，检查内层高度是否大于外层高度。 打印better-scroll对象，看字段 hasVerticalScroll：true , scrollHeight  值是否大于wrapperHeight .

计算高度正常 内层要大于外层

计算高度错误一般出现加载的时机不对：

（1）一般在接口获取完数据进行初始化。

（2）等图片加载完成，才进行初始化。

接口获取完数据 图片加载完 刷新，重新计算

6:之前项目想实现弹出框，弹出框里面有一层进行滚动。实现上面两个都没问题，但是不能滚动。花了两天时间，查找问题。原来不在这个身上。而是弹出框的组件上设置了 touchmove事件，设置了preventDefault()。 

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。