vue better-scroll插件使用詳解

發(fā)布時(shí)間：2020-08-29 20:15:07 來源：腳本之家閱讀：147 作者：ALSNEI 欄目：web開發(fā)

什么是 better-scroll

better-scroll 是一個(gè)移動(dòng)端滾動(dòng)的解決方案，它是基于 iscroll 的重寫，它和 iscroll 的主要區(qū)別在這里。better-scroll 也很強(qiáng)大，不僅可以做普通的滾動(dòng)列表，還可以做輪播圖、picker 等等。

在需要的文件中添加

import BScorll from 'better-scroll';

引用的示例代碼:

let scroll = new BScroll(Dom對象, {//options
 startX: 0,
 startY: 0
})

Vue獲得Dom對象方法,

<div v-el:food-wrapper></div>//定義對象
this.$els.foodWrapper//獲取對象

(Vue 更新數(shù)據(jù)時(shí)是異步的,所以在數(shù)據(jù)未加載完全之前,Bscroll無法獲取目標(biāo)內(nèi)容的高度,所以會(huì)導(dǎo)致無法滾動(dòng)的現(xiàn)象)

為了解決上面的問題,運(yùn)用Vue的nextTick();

(簡單說，因?yàn)镈OM至少會(huì)在當(dāng)前tick里面的代碼全部執(zhí)行完畢再更新。所以不可能做到在修改數(shù)據(jù)后并且DOM更新后再執(zhí)行，要保證在DOM更新以后再執(zhí)行某一塊代碼，就必須把這塊代碼放到下一次事件循環(huán)里面，比如setTimeout(fn, 0)，這樣DOM更新后，就會(huì)立即執(zhí)行這塊代碼。)

// DOM 還沒有更新
Vue.nextTick(function () {
 // DOM 更新了
})

問題:

PC頁面時(shí),點(diǎn)擊不會(huì)被 better-scroll阻止事件,初始化,給 better-scroll派發(fā)事件,使移動(dòng)端擁有點(diǎn)擊事件,因此切換到PC端時(shí),點(diǎn)擊事件會(huì)被執(zhí)行兩次,

方法:在點(diǎn)擊時(shí),傳 $event變量,Better-scroll插件中的 event事件和原生 js的 event有屬性上得區(qū)別,Better-scroll插件派發(fā)的事件時(shí)event_constructed為true,原生點(diǎn)擊事件是沒有這個(gè)屬性的,

selectMenu(index,event){
  if(!event._constructed){//如果不存在這個(gè)屬性,則不執(zhí)行下面的函數(shù)
    return;
  }
}

使用手冊:https://github.com/ustbhuangyi/better-scroll

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue better-scroll插件使用詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽