vue中如何使用better-scroll插件

本篇主要介紹了vue better-scroll外掛程式使用詳解，現在分享給大家，也給大家做個參考。

什麼是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物件方法,

<p v-el:food-wrapper></p>//定义对象
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;
  }
}

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在jQuery如何解決niceScroll滾動條錯位問題

在JS中如何實作百度搜尋介面

在JS中如何實現雙色球功能

以上是vue中如何使用better-scroll插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！