vue better-scroll插件使用詳解
什么是 better-scroll
better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫，它和 iscroll 的主要區(qū)別在 這里 。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里面的代碼全部執(zhí)行完畢再更新。所以不可能做到在修改數據后并且DOM更新后再執(zhí)行，要保證在DOM更新以后再執(zhí)行某一塊代碼，就必須把這塊代碼放到下一次事件循環(huán)里面，比如setTimeout(fn, 0)，這樣DOM更新后，就會立即執(zhí)行這塊代碼。)
// DOM 還沒有更新
Vue.nextTick(function () {
// DOM 更新了
})
問題:
PC頁面時,點擊不會被 better-scroll阻止事件,初始化,給 better-scroll派發(fā)事件,使移動端擁有點擊事件,因此切換到PC端時,點擊事件會被執(zhí)行兩次,
方法:在點擊時,傳 $event變量,Better-scroll插件中的 event事件和原生 js的 event有屬性上得區(qū)別,Better-scroll插件派發(fā)的事件時event_constructed為true,原生點擊事件是沒有這個屬性的,
selectMenu(index,event){
if(!event._constructed){//如果不存在這個屬性,則不執(zhí)行下面的函數
return;
}
}
使用手冊:https://github.com/ustbhuangyi/better-scroll
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue分別運用class綁定和style綁定通過點擊實現樣式切換
這篇文章主要為大家介紹了Vue分別運用class綁定和style綁定通過點擊實現樣式切換，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了vue3子組件數據無法更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue cli構建的項目中請求代理與項目打包問題,需要的朋友可以參考下2018-02-02
本篇文章主要介紹了vuex中使用對象展開運算符的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue3官方提供了 script setup 語法糖,只需在script標簽中添加setup,組件只需引入不用注冊,屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語法糖簡單封裝ckediter的過程,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue移動端項目中如何實現頁面緩存的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了vue項目中使用pinyin轉換插件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中實現動態(tài)生成二維碼的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
在現代Web應用程序中,數據導出到Excel格式是一項常見的需求,Vue.js是一種流行的JavaScript框架,允許我們構建動態(tài)的前端應用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實現Excel數據導出功能,需要的朋友可以參考下2023-10-10
vue基礎之v-bind屬性、class和style用法分析
這篇文章主要介紹了vue基礎之v-bind屬性、class和style用法,結合實例形式分析了vue.js中v-bind綁定及class、style樣式控制相關操作技巧,需要的朋友可以參考下2019-03-03