better-scroll不滾動/連續兩次觸發點選事件等問題的解決
阿新 • • 發佈:2018-12-14
一/ 不滾動
一般我們自己做滾動都是這種結構
<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”選項