vue better-scroll插件使用詳解
什么是 better-scroll
better-scroll 是一個(gè)移動端滾動的解決方案，它是基于 iscroll 的重寫，它和 iscroll 的主要區(qū)別在 這里 。better-scroll 也很強(qiáng)大，不僅可以做普通的滾動列表，還可以做輪播圖、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 更新數(shù)據(jù)時(shí)是異步的,所以在數(shù)據(jù)未加載完全之前,Bscroll無法獲取目標(biāo)內(nèi)容的高度,所以會導(dǎo)致無法滾動的現(xiàn)象)
為了解決上面的問題,運(yùn)用Vue的nextTick();
(簡單說，因?yàn)镈OM至少會在當(dāng)前tick里面的代碼全部執(zhí)行完畢再更新。所以不可能做到在修改數(shù)據(jù)后并且DOM更新后再執(zhí)行，要保證在DOM更新以后再執(zhí)行某一塊代碼，就必須把這塊代碼放到下一次事件循環(huán)里面，比如setTimeout(fn, 0)，這樣DOM更新后，就會立即執(zhí)行這塊代碼。)
// DOM 還沒有更新
Vue.nextTick(function () {
// DOM 更新了
})
問題:
PC頁面時(shí),點(diǎn)擊不會被 better-scroll阻止事件,初始化,給 better-scroll派發(fā)事件,使移動端擁有點(diǎn)擊事件,因此切換到PC端時(shí),點(diǎn)擊事件會被執(zhí)行兩次,
方法:在點(diǎn)擊時(shí),傳 $event變量,Better-scroll插件中的 event事件和原生 js的 event有屬性上得區(qū)別,Better-scroll插件派發(fā)的事件時(shí)event_constructed為true,原生點(diǎn)擊事件是沒有這個(gè)屬性的,
selectMenu(index,event){
if(!event._constructed){//如果不存在這個(gè)屬性,則不執(zhí)行下面的函數(shù)
return;
}
}
使用手冊:https://github.com/ustbhuangyi/better-scroll
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解 vue better-scroll滾動插件排坑
- vue滾動軸插件better-scroll使用詳解
- vue利用better-scroll實(shí)現(xiàn)輪播圖與頁面滾動詳解
- vue滾動插件better-scroll使用詳解
- vue使用 better-scroll的參數(shù)和方法詳解
- vue.js2.0 實(shí)現(xiàn)better-scroll的滾動效果實(shí)例詳解
- vue中使用better-scroll實(shí)現(xiàn)滑動效果及注意事項(xiàng)
- vue2.0 better-scroll 實(shí)現(xiàn)移動端滑動的示例代碼
- vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動效果詳解
- Vue中利用better-scroll組件實(shí)現(xiàn)橫向滾動功能
相關(guān)文章
vue實(shí)現(xiàn)自定義公共組件及提取公共的方法
這篇文章主要介紹了vue實(shí)現(xiàn)自定義公共組件及提取公共的方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
通過vue-cli3構(gòu)建一個(gè)SSR應(yīng)用程序的方法
這篇文章主要介紹了通過vue-cli3構(gòu)建一個(gè)SSR應(yīng)用程序,以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。2018-09-09
解決vue-cli項(xiàng)目打包出現(xiàn)空白頁和路徑錯(cuò)誤的問題
今天小編就為大家分享一篇解決vue-cli項(xiàng)目打包出現(xiàn)空白頁和路徑錯(cuò)誤的問題。具有很好的參考價(jià)值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
axios模塊化封裝實(shí)例化及vue本地解決跨域方案
這篇文章主要為大家介紹了axios模塊化封裝實(shí)例化及vue本地解決跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
本文主要介紹了Vuex?localStorage的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue3優(yōu)雅的使用element-plus的dialog,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了vue組件prop驗(yàn)證作用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了vue組件暴露和.js文件暴露接口操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要分享可編寫 Vue v-for 循環(huán)的 7 種方式，在Vue中，基本上每個(gè)項(xiàng)目都會用到v-for循環(huán)。它們允許你在模板代碼中編寫for循環(huán)，接下來一起看看下面文章的詳細(xì)介紹吧2021-12-12