您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue中如何實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中如何實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)”這篇文章吧。
一、首先安裝安裝
npm install better-scroll --save
二、 并在組件中引用
import BScroll from ‘better-scroll'
template中引用指向?qū)⒁獫L動(dòng)的DOM元素
根據(jù)官方文檔ref屬性的說明,我們可以這樣將DOM元素引用
三、 在methods中注冊(cè)_initScroll方法,這個(gè)方法是對(duì)better-scroll的實(shí)例化,并且這個(gè)方法將來會(huì)在頁面DOM結(jié)構(gòu)渲染后被執(zhí)行
methods: { _initScroll(){ this.menuScroll = new BScroll(this.$refs.menuWrapper, {}) this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {}) } } }
四、在created()方法中,后臺(tái)數(shù)據(jù)獲取成功之后的回調(diào)中,調(diào)用_initScroll();
Vue 更新數(shù)據(jù)時(shí)是異步的,所以在數(shù)據(jù)未加載完全之前,Bscroll無法獲取目標(biāo)內(nèi)容的高度,所以會(huì)導(dǎo)致無法滾動(dòng)的現(xiàn)象
這里一定要注意,數(shù)據(jù)獲取成功后,直接Dom不一定是數(shù)據(jù)獲取之后的渲染,所以要利用this.nextTick()方法,在this.nextTick的回調(diào)中使用_initScroll();
看看官方關(guān)于this.$nextTick()的說明
所以我們?cè)陧?xiàng)目中應(yīng)該這樣書寫:
以上是“vue中如何實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。