vue better-scroll插件使用詳解

發布時間：2020-08-29 20:15:07 來源：腳本之家閱讀：155 作者：ALSNEI 欄目：web開發

什么是 better-scroll

better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫，它和 iscroll 的主要區別在這里。better-scroll 也很強大，不僅可以做普通的滾動列表，還可以做輪播圖、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 更新數據時是異步的,所以在數據未加載完全之前,Bscroll無法獲取目標內容的高度,所以會導致無法滾動的現象)

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

(簡單說，因為DOM至少會在當前tick里面的代碼全部執行完畢再更新。所以不可能做到在修改數據后并且DOM更新后再執行，要保證在DOM更新以后再執行某一塊代碼，就必須把這塊代碼放到下一次事件循環里面，比如setTimeout(fn, 0)，這樣DOM更新后，就會立即執行這塊代碼。)

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

問題:

PC頁面時,點擊不會被 better-scroll阻止事件,初始化,給 better-scroll派發事件,使移動端擁有點擊事件,因此切換到PC端時,點擊事件會被執行兩次,

方法:在點擊時,傳 $event變量,Better-scroll插件中的 event事件和原生 js的 event有屬性上得區別,Better-scroll插件派發的事件時event_constructed為true,原生點擊事件是沒有這個屬性的,

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站