原網(wǎng)址
https://blog.csdn.net/qq_22557797/article/details/78866328
1、準(zhǔn)備工作
在項(xiàng)目中安裝better-scroll:
npm install --save better-scroll
組件中引入插件
import? ?BScroll? ?from? ?"better-scroll";
2好乐、開始使用插件
dom結(jié)構(gòu)
<div class="bscroll" ref="bscroll">
? ? ? ?<div class="bscroll-container"></div>
</div>
!最好在<div class="bscroll-container"></div>寫上一堆內(nèi)容測(cè)試效果躏碳。
注：dom結(jié)構(gòu)規(guī)定這樣型宙，滑動(dòng)區(qū)域的內(nèi)容放在bscroll-container中，否則，則可能不會(huì)成功
部分css
.bscroll{width:100%;height:50vH;overflow: hidden;}
注：父級(jí)bscroll必須有高度，并且overflow為hidden;
插件使用
mounted(){
? ? this.$nextTick(() => {
? ? ? ? let bscrollDom = this.$refs.bscroll;
? ? ? ? this.aBScroll = new BScroll(bscrollDom,{})
? ? })?
}
3拱她、better-scroll常用參數(shù)含義
startX: 0 (默認(rèn)值:0) 表示X軸滾動(dòng)的起始值
startY: 0 (默認(rèn)值:0) 表示Y軸滾動(dòng)的起始值
scrollY: false (默認(rèn)值:false) 表示延Y軸滾動(dòng)
scrollX: true (默認(rèn)值:true) 表示延X軸滾動(dòng)
freeScroll: false (默認(rèn)值:false) 自由方向滾動(dòng)
scrollbar: false (默認(rèn)值:false) 滾動(dòng)條
> 注: 當(dāng)開啟滾動(dòng)條時(shí)，建議直接父級(jí)元素position設(shè)為 relative扔罪；因?yàn)闈L動(dòng)條為絕對(duì)定位秉沼，
為避免滾動(dòng)條相對(duì)其祖輩元素定位而出現(xiàn)滾動(dòng)條不符合預(yù)期效果的現(xiàn)象
click: false (默認(rèn)值:false) 是否派發(fā)點(diǎn)擊事件；
> 注：若設(shè)置為true仍然無法觸發(fā)click事件矿酵，可以在click事件中添加如下方法
首先在點(diǎn)擊事件中傳入 $event ;示例：@click = "doSome($event)";
然后在事件中如下做法：
doSome(event){
? ? if(event._constructed){return true;}
? ? <!--在此下面寫入你的事件-->
}
momentum: true (默認(rèn)值:true) 當(dāng)快速滑動(dòng)時(shí)是否開啟滑動(dòng)慣性
bounce: true (默認(rèn)值:true) 是否啟用回彈動(dòng)畫效果
bounceTime: 700 (默認(rèn)值:700唬复，單位:ms)回彈動(dòng)畫的動(dòng)畫時(shí)長(zhǎng)。
probeType: 可選值：1全肮、2敞咧、3; (默認(rèn)值: 0 不派發(fā)scroll事件)想要獲取滾動(dòng)實(shí)時(shí)位置時(shí)派發(fā)事件的截流情況
? ? 1 滾動(dòng)的時(shí)候會(huì)派發(fā)scroll事件，會(huì)截流;
? ? 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā)scroll事件倔矾，不會(huì)截流;
? ? 3 除了實(shí)時(shí)派發(fā)scroll事件妄均，在swipe的情況下仍然能實(shí)時(shí)派發(fā)scroll事件;
4柱锹、better-scroll常用方法
refresh() -> 重新計(jì)算 better-scroll哪自，當(dāng) DOM 結(jié)構(gòu)發(fā)生變化的時(shí)候務(wù)必要調(diào)用確保滾動(dòng)的效果正常
scrollTo(x, y, time, easing) -> 滾動(dòng)到指定的位置;
? ? x: X軸位置;
? ? y: Y軸位置;
? ? time: 到達(dá)指定位置所需時(shí)間，單位ms;
? ? easing: 動(dòng)畫函數(shù)(一般不建議修改)
scrollBy(x, y, time, easing) -> 相對(duì)于當(dāng)前位置偏移滾動(dòng) x,y 的距離禁熏；
? ? x: 當(dāng)前位置偏移X軸的距離
? ? y: 當(dāng)前位置偏移Y軸的距離
? ? time: 到達(dá)偏移位置所需時(shí)間壤巷，單位ms;
? ? easing: 動(dòng)畫函數(shù)(一般不建議修改)
scrollToElement(el, time, offsetX, offsetY, easing) -> 滾動(dòng)到指定的目標(biāo)元素
? ? el: 目標(biāo)元素;
? ? time: 到達(dá)目標(biāo)元素所需時(shí)間，單位ms;
? ? offsetX: 距離目標(biāo)元素所偏移X軸的距離;設(shè)置為true時(shí)瞧毙，到達(dá)目標(biāo)元素中心位置
? ? offsetY: 距離目標(biāo)元素所偏移Y軸的距離;設(shè)置為true時(shí)胧华，到達(dá)目標(biāo)元素中心位置
? ? easing: 動(dòng)畫函數(shù)(一般不建議修改)
使用示例：
this.aBScroll.scrollToElement("li",300);
5、better-scroll 中的srcoll系列事件
beforeScrollStart -> 觸發(fā)時(shí)機(jī)：滾動(dòng)開始之前
scrollStart -> 觸發(fā)時(shí)機(jī)：滾動(dòng)開始時(shí)
scroll -> 觸發(fā)時(shí)機(jī)：滾動(dòng)過程中宙彪，具體時(shí)機(jī)取決于選項(xiàng)中的 probeType矩动。
scrollCancel -> 觸發(fā)時(shí)機(jī)：滾動(dòng)被取消。
scrollEnd -> 觸發(fā)時(shí)機(jī)：滾動(dòng)結(jié)束释漆。
touchEnd -> 觸發(fā)時(shí)機(jī)：鼠標(biāo)/手指離開悲没。
使用示例:
this.aBScroll.on('scroll',(pos) => {
? ? // 你可以打印一下參數(shù)pos中都包含了什么！
? ? <!--寫入你要觸發(fā)的事情-->
})
想要了解更多參數(shù)及其使用方法請(qǐng)前往：better-scroll文檔地址
