better-scroll不滚动/连续两次触发点击事件等问题的解决

一/ 不滚动

一般我们自己做滚动都是这种结构

<div class="content">
          <-- 需要滚动的内容 -->
</div>

会将高度等样式设置在“.content”元素上
而better-scroll要求的结构是

<div class="wrapper">
     <div class="content">
              <-- 需要滚动的内容 -->
     </div>
</div>
var scroll = new BScroll('.wrapper')

刚开始我以为".wrapper"仅相当一个容器，我还是把高度等样式加在了".content"上，结果可想而知没滚动效果。
后来就把样式都加在了".wrapper"上，而且".content"不能设置高度，另外我看网上说要给".wrapper"加样式"overflow: hidden;"，可是我试着不加没影响。
此外，

console.log(scroll);

可以监听scroll的值，截图如下：
在这里插入图片描述
wrapperHeight：是wrapper容器的高度，scrollHeight：是内容的高度，当scrollHeight>wrapperHeight时才会有滚动，hasVerticalScroll为true说明竖向滚动

二/ 点击一次连续触发两次点击事件
我的项目中DOM是动态生成的，要创建多个滚动区域，数量不确定，而且要在隐藏和显示间转换，点击隐藏/显示滚动区的代码如下:

 $('.levelone-box').on('click', '.levelone', function (e) {
                $('.levelone').eq(currentNum).removeClass('levelone-active');
                $('.leveltwo-scroll').eq(currentNum).fadeToggle();
                var domArr = [].slice.call($('.levelone'), 0);
                domArr.forEach(function (item, index) {
                    if (item === e.target) {
                        currentNum = index;
                    }
                });
                $('.levelone').eq(currentNum).addClass('levelone-active');
                $('.leveltwo-scroll').eq(currentNum).fadeToggle();
                if ($('.leveltwo-scroll').eq(currentNum).text() !== '') {
                    var indexScroll = '.' + 'scroll' + currentNum;
                    scrolltwo = new BScroll(indexScroll, {
                        click: true
                    });
                }
            })

这样一个问题是同一个DOM随着多次点击会多次new BScroll，导致连续触发点击事件，这肯定不是我想要的。
文档介绍destroy()方法作用：作用：销毁 better-scroll，解绑事件。
代码修改为：

 $('.levelone-box').on('click', '.levelone', function (e) {
                $('.levelone').eq(currentNum).removeClass('levelone-active');
                $('.leveltwo-scroll').eq(currentNum).fadeToggle();
                var domArr = [].slice.call($('.levelone'), 0);
                domArr.forEach(function (item, index) {
                    if (item === e.target) {
                        currentNum = index;
                    }
                });
                $('.levelone').eq(currentNum).addClass('levelone-active');
                $('.leveltwo-scroll').eq(currentNum).fadeToggle();
                scrolltwo.destroy();  //解除绑定
                if ($('.leveltwo-scroll').eq(currentNum).text() !== '') {
                    var indexScroll = '.' + 'scroll' + currentNum;
                    scrolltwo = new BScroll(indexScroll, {
                        click: true
                    });
                }
            })

另外，你不能选择多个DOM元素同时一次性使用scroll，只对第一个有作用，其他的都没作用上。

另外解决连续多次触发点击事件的方法还有“tap”选项

better-scroll不滚动/连续两次触发点击事件等问题的解决

猜你喜欢