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

冷不防 2022-04-05 13:46 836阅读 0赞

一/ 不滚动

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

会将高度等样式设置在“.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的值，截图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]  
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”选项][tap]

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

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

//动态加载报表列表
            function reportList(data) {
                var oLeveloneBox = $('.levelone-box');
                data.forEach(function (item, index) {
                    var oLevelone = $('<div class="levelone" data-leveloneindex="' + index + '">' + item.levelOne + '</div>');
                    oLeveloneBox.append(oLevelone)
                })
                var oLeveltwoBox = $('.leveltwo-box');
                var leveltwoIndex = 0;
                data.forEach(function (item, index) {
                    var oLeveltwoScroll = $('<div class="leveltwo-scroll scroll' + index + '"></div>');
                    var oLeveltwo = $('<div class="leveltwo"></div>');
                    item.levelTwo.forEach(function (items, index) {
                        var oLeveltwoItem = $('<div class="leveltwo-item" data-leveltwoindex="' + leveltwoIndex + '" data-RptCode="' + items.RptCode + '" data-QueSQL="' + items.QueSQL + '">' + items.RptName + '</div>');
                        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; ，否则会出现很滑稽的事情

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220405/2bf3a65cdc7d41739b7c2883649b880d.png
[tap]: https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#tap