轉(zhuǎn)載。 https://blog.csdn.net/qq_22557797/article/details/78866328
在項(xiàng)目中安裝better-scroll:
npminstall--save better-scroll
組件中引入插件
importBScrollfrom"better-scroll";
dom結(jié)構(gòu)
注：dom結(jié)構(gòu)規(guī)定這樣酸纲，滑動(dòng)區(qū)域的內(nèi)容放在bscroll-container中倡鲸，否則特漩，則可能不會(huì)成功
部分css
.bscroll{
width:100%;
height:5vH;
overflow: hidden;
}
注：父級(jí)bscroll必須有高度亿驾，并且overflow為hidden;
插件使用
mounted(){
this.$nextTick(()=>{
letbscrollDom =this.$refs.bscroll;
this.aBScroll =newBScroll(bscrollDom,{})
? ? })?
}
注：
1嘹黔、插件初始化時(shí)需要具體元素，所以再DOM結(jié)構(gòu)中使用ref標(biāo)記元素莫瞬，以備插件使用;?
2儡蔓、建議放在nextTick方法里面，避免DOM結(jié)構(gòu)未渲染完成從而造成子元素bscroll-container高度計(jì)算不準(zhǔn)確疼邀；
3喂江、建議使用this.bscroll方式定義，以備在其他方法中使用;
按照以上步驟旁振，便可以簡(jiǎn)單的使用better-scroll插件了获询，效果如下圖
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(jué)軸滾動(dòng)
freeScroll:false(默認(rèn)值:false) 自由方向滾動(dòng)
scrollbar:false(默認(rèn)值:false) 滾動(dòng)條
> 注: 當(dāng)開(kāi)啟滾動(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仍然無(wú)法觸發(fā)click事件尝哆，可以在click事件中添加如下方法
首先在點(diǎn)擊事件中傳入 $event;示例：@click ="doSome($event)";
然后在事件中如下做法：
doSome(event){
if(event._constructed){returntrue;}
? ? <!--在此下面寫(xiě)入你的事件-->
}
momentum:true(默認(rèn)值:true) 當(dāng)快速滑動(dòng)時(shí)是否開(kāi)啟滑動(dòng)慣性
bounce:true(默認(rèn)值:true) 是否啟用回彈動(dòng)畫(huà)效果
bounceTime:700(默認(rèn)值:700，單位:ms)回彈動(dòng)畫(huà)的動(dòng)畫(huà)時(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事件;
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)畫(huà)函數(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)畫(huà)函數(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)畫(huà)函數(shù)(一般不建議修改)
使用示例：
this.aBScroll.scrollToElement("li",300);
5勿她、better-scroll 中的srcoll系列事件
beforeScrollStart -> 觸發(fā)時(shí)機(jī)：滾動(dòng)開(kāi)始之前
scrollStart -> 觸發(fā)時(shí)機(jī)：滾動(dòng)開(kāi)始時(shí)
scroll -> 觸發(fā)時(shí)機(jī)：滾動(dòng)過(guò)程中，具體時(shí)機(jī)取決于選項(xiàng)中的 probeType阵翎。
scrollCancel -> 觸發(fā)時(shí)機(jī)：滾動(dòng)被取消逢并。
scrollEnd -> 觸發(fā)時(shí)機(jī)：滾動(dòng)結(jié)束。
touchEnd -> 觸發(fā)時(shí)機(jī)：鼠標(biāo)/手指離開(kāi)郭卫。
使用示例:
this.aBScroll.on('scroll',(pos) => {
? ? // 你可以打印一下參數(shù)pos中都包含了什么砍聊！
<!--寫(xiě)入你要觸發(fā)的事情-->
})
想要了解更多參數(shù)及其使用方法請(qǐng)前往：better-scroll文檔地址
