better-scroll排坑

来源：18-5 商品详情页实现（5）

weibo_Gingbery_0

2017-06-18

better-scroll有个很大的坑，跟dom文档树的结构和初始化相关，老师没有提到，看到的同学需要注意下：

以代码为例：

<div id="content">
    <ul></ul>
    <div id="content2></div>
</div>

以上结构，如果对content进行better-scroll初始化，div#content可以正常滚动没问题，但是如果也对div#content2进行了better-scroll初始化，那么div#content2就会被初始化两次，正常滚动没问题，但是在div#content2里面定义的click事件就会被派发两次。所要避免对DOM的多次初始化，有两点需要注意：1.针对以上结构可以把div#content2放到div#content外面；2.如果需要对DOM进行多次初始化，使用refesh方法，而不是new BScroll方法

写回答

1回答

ustbhuangyi

2017-06-18

对 better-scroll 有更好的理解可以看看这篇文章：http://www.imooc.com/article/18232

weibo_Gingbery_0

这篇文章我读了，关于某些细节我理解的可能不太准确，但是对于出现派发两次click事件的原因我的理解应该没错。以您的domo中的city为例，city中的html结构就符合我举例的结构，假如对city最右侧的div.shortcut也应用better-scroll，并且监听click事件，这时您就会发现我以上描述的问题：click事件被better-scroll派发了两次。

2017-06-18

共1条回复

Vue.js2.5+cube-ui重构饿了么App（经典再升级）

掌握Vue1.0到2.0再到2.5最全版本应用与迭代，打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程

相似问题

安装better-scroll后出错

回答 1

better-scroll添加probeType: 3后，拖拽就不灵活了

回答 1

better-scroll中的下拉刷新（上滑加载）事件不触发

回答 2

better-scroll 怎么实现下拉刷新

回答 4

关于 better-scroll click执行两次的问题。

回答 1

打开慕课网App查看更多内容