vue better scroll外掛程式使用詳解

什麼是 better-scroll

better-scroll 是乙個移動端滾動的解決方案，它是基於 iscroll 的重寫，它和 i 的主要區別在這裡。better-scroll 也很強大，不僅可以做普通的滾動列表，還可以做輪播圖、picker 等等。

在需要的檔案中新增

import bscorll from 'better-scroll';

引用的示例**:

let scroll = new bscroll(dom物件, )

vue獲得dom物件方法,

//定義物件

this.$els.foodwrapper//獲取物件

(vue 更新資料時是非同步的,所以在資料未載入完全之前,bscroll無法獲取目標內容的高度,所以會導致無法滾動的現象)

為了解決上面的問題,運用vue的nextpovqqhwnetick();

(簡單說，因為dom至少會在當前tick裡面的**全部執行完畢再更新。所以不可能做到在修改資料後並且dom更新後再執行，要保證在dom更新以後再執行某一塊**，就必須把這塊**放到下一次事件迴圈裡面，比如settimeout(fn, 0)，這樣dom更新後，就會立即執行這塊**。)

// 還沒有更新

vue.nexttick(function () )

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

方法:在點選時,傳 $event變數,better-scroll外掛程式中的 event事件和原生 js的 event有屬性上得區別,better-scroll外掛程式派發的事件時povqqhwneevent_constructed為true,原生點選事件是沒有這個屬性的,

selectmenu(index,程式設計客棧event)

}使用手冊:

本文標題: vue better-scroll外掛程式使用詳解

本文位址: