1. 程式人生 > >better-scroll不滾動/連續兩次觸發點選事件等問題的解決

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”選項