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

一/ 不滚动

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

          <-- 需要滚动的内容 -->

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

     

              <-- 需要滚动的内容 -->
     

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();
               currentNum = e.target.dataset.leveloneindex;
                $('.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();
                currentNuT = e.target.dataset.leveltwoindex;
                $('.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
                    });
                }
            })

当然还有方法是：实现BScroll对象是一个单例

if(!this.scroll) {
     this.scroll = new BScroll('.list-content', {
          click: true
          })
     } else {
         this.scroll.refresh() // 让滚动条刷新一下: 重新统计内容的高度
     }

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

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

三/ 动态加载的DOM并且需要显示隐藏，如何在正确的时机使用better-scroll

如果DOM是动态的加载的，那把元素“塞进”页面后再创建better-scroll对象是没有问题的，关键我的项目不仅是动态加载，还是初始默认隐藏（相当于没渲染），点击按钮后才会显示。刚开始代码如下：

//动态加载报表列表
        function reportList(data) {
            var oLeveloneBox = $('.levelone-box');
            data.forEach(function (item, index) {
                var oLevelone = $('
' + item.levelOne + '
');
                oLeveloneBox.append(oLevelone)
            })
            var oLeveltwoBox = $('.leveltwo-box');
            var leveltwoIndex = 0;
            data.forEach(function (item, index) {
                var oLeveltwoScroll = $('
');
                var oLeveltwo = $('
');
                item.levelTwo.forEach(function (items, index) {
                    var oLeveltwoItem = $('
' + items.RptName + '
');
                    oLeveltwo.append(oLeveltwoItem);
                    leveltwoIndex++;
                })
                oLeveltwoScroll.append(oLeveltwo);
                oLeveltwoBox.append(oLeveltwoScroll);
            })
            reList();
            scrollone = new BScroll('.levelone-box-scroll', {
               click: true
            });
            scrolltwo = new BScroll('.scroll0', {
                click: true
            });
        }

我动态创建完元素后就开始创建better-scroll对象，那个隐藏的DOM还没渲染，滚动肯定是没有效果的。打印wrapperHeight和scrollHeight的值都为0。
解决办法有两个：一是如果按上面的做，那显示DOM时就要scrolltwo.refresh()，更新数据。二是换个创建better-scroll对象的时机，那就在显示DOM的时候创建。
以为这样就可以了，谁知还有问题，先前我把wrapper的高度设置成100%，所以显示时wrapperHeight的值一个为0一个为110，完全不对，所以我又在DOM显示时动态设置高度，另外我也发现了，真有必要设置overflow: hidden; ，否则会出现很滑稽的事情