better-scroll它可以用手指拖動(dòng)滑動(dòng)蓝厌，比滾動(dòng)條高級(jí)些玄叠。還可以上拉刷新后臺(tái)數(shù)據(jù)，下拉加載拓提。
需要開啟读恃，默認(rèn)會(huì)是false，開啟是true。還需要監(jiān)聽寺惫，
使用方法：
在html中先創(chuàng)建兩部分
1疹吃，容器
2，滑塊
<!-- <滑塊section id="continer"> -->
<!-- <容器 div>
<div>
內(nèi)容
</div>
</div> -->
<!-- </section> -->
二西雀、引入萨驶、創(chuàng)建
1、在script中引入better?scroll.js
2艇肴、初始化：
var newbs = new BScroll('容?的名字'篡撵，{參數(shù)里面設(shè)置的對(duì)象})
例如：
var myBs = new BScroll('#container', {
click: true, // 當(dāng)需要添加點(diǎn)擊事件的時(shí)候，需要將其click屬性設(shè)為true
// 監(jiān)聽是否在滾動(dòng)
probeType: 3,
// 開啟下拉刷新豆挽，這個(gè)
pullDownRefresh: true,
// 開啟上拉加載
pullUpLoad: {
threshold: -90,
}
});
myBs.on('scroll', function (size) {
// console.log(size);
});
myBs.on('scrollEnd', function (size) {
console.log('滾動(dòng)結(jié)束');
});
// 監(jiān)聽下拉刷新
myBs.on('pullingDown', function () {
console.log('下拉刷新結(jié)束');
// 添加元素
var li = document.createElement('li');
li.innerText = '參數(shù)有了';
// 父元素.insertBefore(新的子元素, 參考子元素）
myBs.finishPullDown();
});
myBs.on('pullingUp', function () {
console.log(2);
for (var i = 0; i < 100; i++) {
var li = document.createElement('li');
li.innerText = '參數(shù)有了';
}
myBs.finishPullUp();
});
知識(shí)補(bǔ)充
pullingDown (用前先開啟) 下拉刷新 育谬，這個(gè)時(shí)機(jī)一般用來去后端請(qǐng)求數(shù)
據(jù)。
需要finishPullDown()配套使用
當(dāng)下拉刷新數(shù)據(jù)加載完畢后帮哈，需要調(diào)用此方法表示 better?scroll 數(shù)據(jù)已
加載
bScroll.on('pullingDown', function () {
console.log('刷新數(shù)據(jù)');
bScroll.finishPullDown();
})
pullingUp: 在一次上拉加載的動(dòng)作后膛檀，這個(gè)時(shí)機(jī)一般用來去后端請(qǐng)求數(shù)
據(jù)。
- 需要pullUpLoad屬性支持
設(shè)置為true：可以開啟上拉加載娘侍，
設(shè)置為對(duì)象：
threshold： 可以配置頂部上拉的距離（threshold）決定加載時(shí)機(jī)
stop： 回彈停留的距離（stop）
2 需要finishPullUp()收尾
當(dāng)下拉刷新數(shù)據(jù)加載完畢后咖刃，需要調(diào)用此方法告訴 better?scroll 數(shù)據(jù)已
加載。
