一/ 不滚动
一般我们自己做滚动都是这种结构
<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();
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 = $('<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; ,否则会出现很滑稽的事情