什么是 better-scroll

創(chuàng)新互聯(lián)長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為泗縣企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)，泗縣網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

better-scroll 是一個移動端滾動的解決方案，它是基于 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ù)據(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頁面時,點(diǎn)擊不會被 better-scroll阻止事件,初始化,給 better-scroll派發(fā)事件,使移動端擁有點(diǎn)擊事件,因此切換到PC端時,點(diǎn)擊事件會被執(zhí)行兩次,

方法:在點(diǎn)擊時,傳 $event變量,Better-scroll插件中的 event事件和原生 js的 event有屬性上得區(qū)別,Better-scroll插件派發(fā)的事件時event_constructed為true,原生點(diǎn)擊事件是沒有這個屬性的,

selectMenu(index,event){
  if(!event._constructed){//如果不存在這個屬性,則不執(zhí)行下面的函數(shù)
    return;
  }
}

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：vuebetter-scroll插件使用詳解
文章URL：http://jinyejixie.com/article14/iiesde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站、小程序開發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)