Vue中的better-scroll插件
在需要的文件中添加
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; } }