縱向的排版
HTML:
<!-- 1\. 需要一個包裹容器 -->
<section class="wrap">
<!-- 滑動模塊 -->
<div>
<!-- 內(nèi)容區(qū)域 -->
content
</div>
</section>
css:
// 包裹盒子
.wrap {
height: 100%;
>div {
min-height: 100.1%; // 以防內(nèi)容太少扣墩，導(dǎo)致滾動失敗趾浅，可以通過js獲取父元素高度 + 1px
}
}
// 內(nèi)容盒子
.content {
}
JS:
<script src="./js/bscroll.min.js"></script>
<script>
window.onload = function () {
var bScroll = new BScroll('.wrap', {
scrollY: true // 默認
});
}
</script>
橫向排版
HTML
<div class="menu-wrap">
<div>
<div class="content-nav">
<span>菜單1</span>
<span>菜單2</span>
<span>菜單3</span>
<span>菜單4</span>
<span>菜單5</span>
<span>菜單6</span>
<span>菜單7</span>
<span>菜單8</span>
<span>菜單9</span>
<span>菜單10</span>
</div>
</div>
</div>
CSS
.menu-wrap {
position: relative;
height: px2rem(80);
line-height: px2rem(80);
}
.menu-wrap>div {
position: absolute;
}
.content-nav {
display: flex;
span {
width: px2rem(100);
margin: 0 px2rem(20);
}
}
JS
var bScroll = new BScroll('.menu-wrap', {
scrollX: true
});
常用方法
- refresh(); =>重新計算 better-scroll，當(dāng) DOM 結(jié)構(gòu)發(fā)生變化的時候務(wù)必要調(diào)用確保滾動的效果正常
bScroll.refresh()
- scrollTo(x, y, time, easing); => 滾動到指定的位置
x: x軸位置锐墙，
y: y軸位置
time: 滾動動畫時長
easing: 緩動函數(shù) 不建議修改
bScroll.scrollTo(0, -100, 1000);
- scrollToElement(el, time, offsetX, offsetY, easing); =》 滾動到指定元素
el：目標(biāo)元素, 支持傳入元素對象，字符串則以querySelector獲取
time: 滾動動畫執(zhí)行時長（ms）, 默認0ms
offsetX 相對于目標(biāo)元素的橫軸偏移量 长酗，true表示為中心
offsetY 相對于目標(biāo)元素的縱軸偏移量 溪北，true表示為中心
bScroll.scrollToElement('li:nth-child(10)', 1000)
- destroy(); 銷毀better-scroll, 解綁事件
常用事件
- scroll: 監(jiān)聽滾動事件，
必須開啟： probeType: 1 | 2 | 3
probeType:
1). 當(dāng) probeType 為 1 的時候夺脾，會非實時（屏幕滑動超過一定時間后）派發(fā)scroll 事件之拨；
2). 當(dāng) probeType 為 2 的時候，會在屏幕滑動的過程中實時的派發(fā) scroll 事件咧叭；
3). 當(dāng) probeType 為 3 的時候敦锌，不僅在屏幕滑動的過程中，而且在 momentum 滾動動畫運行過程中實時派發(fā) scroll 事件
var bScroll = new BScroll('.wrap', {
probeType: 3
});
bScroll.on('scroll', function (obj) {
// obj: 位置(坐標(biāo))信息對象 {x, y}
})
- scrollEnd: 滾動結(jié)束觸發(fā)
bScroll.on('scrollEnd', function (obj) {
// obj: 位置(坐標(biāo))信息對象 {x, y}
})
- pullingDown: 在一次下拉刷新的動作后佳簸，這個時機一般用來去后端請求數(shù)據(jù)乙墙。
1). 需要pullDownRefresh屬性支持：
設(shè)置為true：可以開啟下拉刷新颖变，
設(shè)置為對象
threshold： 可以配置頂部下拉的距離（threshold）決定刷新時機
stop： 回彈停留的距離（stop）
2). 需要finishPullDown()收尾
當(dāng)下拉刷新數(shù)據(jù)加載完畢后，需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載
var bScroll = new BScroll('.wrap', {
// pullDownRefresh: true // 默認stop: 40
pullDownRefresh: {
threshold：90,
stop: 0
}
});
bScroll.on('pullingDown', function () {
console.log('我想刷新數(shù)據(jù)');
// 干點啥
bScroll.finishPullDown();
})
- pullingUp: 在一次上拉加載的動作后听想，這個時機一般用來去后端請求數(shù)據(jù)腥刹。
1). 需要pullUpLoad屬性支持
設(shè)置為true：可以開啟上拉加載，
設(shè)置為對象：
threshold： 可以配置頂部上拉的距離（threshold）決定加載時機
stop： 回彈停留的距離（stop）
2). 需要finishPullUp()收尾
當(dāng)下拉刷新數(shù)據(jù)加載完畢后汉买，需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載衔峰。
bScroll.on('pullingDown', function () {
console.log('我想加載數(shù)據(jù)');
// 干點啥
bScroll.finishPullUp();
})
屬性
- maxScrollX: scroll 最大橫向滾動位置
maxScrollX 是負值:
bScroll.maxScrollX = -400;
- maxScrollY: scroll 最大縱向滾動位置
maxScrollY 是負值
bScroll.maxScrollY = -400;
