vue better-scroll外掛程式使用詳解，vuebetter-scroll

vue better-scroll外掛程式使用詳解，vuebetter-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對象方法,

<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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。