欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue better-scroll插件使用詳解

 更新時間：2018年01月25日 09:40:31   作者：ALSNEI  
本篇文章主要介紹了vue better-scroll插件使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

什么是 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 更新數(shù)據(jù)時是異步的,所以在數(shù)據(jù)未加載完全之前,Bscroll無法獲取目標(biāo)內(nèi)容的高度,所以會導(dǎo)致無法滾動的現(xiàn)象)

為了解決上面的問題,運用Vue的nextTick();

(簡單說，因為DOM至少會在當(dāng)前tick里面的代碼全部執(zhí)行完畢再更新。所以不可能做到在修改數(shù)據(jù)后并且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í)行下面的函數(shù)
    return;
  }
}

使用手冊:https://github.com/ustbhuangyi/better-scroll

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換

    Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換

    這篇文章主要為大家介紹了Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-07-07
  • vue3子組件數(shù)據(jù)無法更新問題

    vue3子組件數(shù)據(jù)無法更新問題

    這篇文章主要介紹了vue3子組件數(shù)據(jù)無法更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue cli構(gòu)建的項目中請求代理與項目打包問題

    vue cli構(gòu)建的項目中請求代理與項目打包問題

    這篇文章主要介紹了vue cli構(gòu)建的項目中請求代理與項目打包問題,需要的朋友可以參考下
    2018-02-02
  • vuex中使用對象展開運算符的示例

    vuex中使用對象展開運算符的示例

    本篇文章主要介紹了vuex中使用對象展開運算符的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue3的setup語法糖簡單封裝ckediter的過程

    vue3的setup語法糖簡單封裝ckediter的過程

    Vue3官方提供了 script setup 語法糖,只需在script標(biāo)簽中添加setup,組件只需引入不用注冊,屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語法糖簡單封裝ckediter的過程,感興趣的朋友一起看看吧
    2023-10-10
  • vue移動端項目中如何實現(xiàn)頁面緩存的示例代碼

    vue移動端項目中如何實現(xiàn)頁面緩存的示例代碼

    這篇文章主要介紹了vue移動端項目中如何實現(xiàn)頁面緩存的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • vue項目中使用pinyin轉(zhuǎn)換插件方式

    vue項目中使用pinyin轉(zhuǎn)換插件方式

    這篇文章主要介紹了vue項目中使用pinyin轉(zhuǎn)換插件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue中實現(xiàn)動態(tài)生成二維碼的方法

    vue中實現(xiàn)動態(tài)生成二維碼的方法

    這篇文章主要介紹了vue中實現(xiàn)動態(tài)生成二維碼的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 在Vue中使用xlsx組件實現(xiàn)Excel導(dǎo)出功能的步驟詳解

    在Vue中使用xlsx組件實現(xiàn)Excel導(dǎo)出功能的步驟詳解

    在現(xiàn)代Web應(yīng)用程序中,數(shù)據(jù)導(dǎo)出到Excel格式是一項常見的需求,Vue.js是一種流行的JavaScript框架,允許我們構(gòu)建動態(tài)的前端應(yīng)用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實現(xiàn)Excel數(shù)據(jù)導(dǎo)出功能,需要的朋友可以參考下
    2023-10-10
  • vue基礎(chǔ)之v-bind屬性、class和style用法分析

    vue基礎(chǔ)之v-bind屬性、class和style用法分析

    這篇文章主要介紹了vue基礎(chǔ)之v-bind屬性、class和style用法,結(jié)合實例形式分析了vue.js中v-bind綁定及class、style樣式控制相關(guān)操作技巧,需要的朋友可以參考下
    2019-03-03

最新評論