better-scroll踩坑事件记录

自打用了better-scroll插件,就遇到无数的坑,基本是无法滚动。前一个vue项目的滚动还带卡顿,给我的印象实在不好啊。(开始对它有阴影了)

所以在这个项目开始时就格外注意这个插件的使用。从一开始单独在组件里使用,到开始把它封装独立组件,终于,果不其然又出现无法滚动问题。



这是把better-scroll封装组件的代码

看上去没问题,在别组件引用时用div替换插槽,并且保证高度大于wrapper的就行。

但是还是出问题了,有时chrome调试可以滚动,真机上iphone6s无法滚动!(问题图片就不贴了,麻烦~)

又在官方文档几方查阅。最后得出的结论还是: 无法滚动的原因,就是content高度没有超过wrapper。也只能往这去找“线索”。

几番周折,终于在一个组件引用时找到wrapper高度和content高度一样。所以造成了无法滚动[捂脸].(此前有多个页面组件,有的页面可以滚动,有的不行。搞得心态快崩)

本次的心得:对待这个插件,如果出现无法滚动问题,还是乖乖先去筛查高度。如果页面上有很多不确定高度的图片?那就在onload时间去回调refresh()。

扩展: beter-scroll的一些疑难杂症

你可能感兴趣的:(better-scroll踩坑事件记录)