vue中實現(xiàn)移動端的scroll滾動方法
更新時間：2018年03月03日 10:23:41 作者：景洪在編程
下面小編就為大家分享一篇vue中實現(xiàn)移動端的scroll滾動方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
一、首先安裝安裝
npm install better-scroll --save
二、 并在組件中引用
import BScroll from ‘better-scroll'
template中引用指向?qū)⒁獫L動的DOM元素
根據(jù)官方文檔ref屬性的說明，我們可以這樣將DOM元素引用
三、 在methods中注冊_initScroll方法，這個方法是對better-scroll的實例化，并且這個方法將來會在頁面DOM結(jié)構(gòu)渲染后被執(zhí)行
methods: {
_initScroll(){
this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
}
}
}
四、在created()方法中，后臺數(shù)據(jù)獲取成功之后的回調(diào)中，調(diào)用_initScroll（）；
Vue 更新數(shù)據(jù)時是異步的,所以在數(shù)據(jù)未加載完全之前,Bscroll無法獲取目標內(nèi)容的高度,所以會導(dǎo)致無法滾動的現(xiàn)象
這里一定要注意，數(shù)據(jù)獲取成功后，直接Dom不一定是數(shù)據(jù)獲取之后的渲染，所以要利用this.nextTick()方法，在this.nextTick的回調(diào)中使用_initScroll（）；
看看官方關(guān)于this.$nextTick()的說明
所以我們在項目中應(yīng)該這樣書寫：
以上這篇vue中實現(xiàn)移動端的scroll滾動方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue.nextTick 的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue3哈希模式實現(xiàn)錨點導(dǎo)航方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue中下載文件后無法打開的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Echarts只圖例legend基本配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue頁面回退或關(guān)閉,發(fā)送請求不中斷問題
這篇文章主要介紹了vue頁面回退或關(guān)閉,發(fā)送請求不中斷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vue項目部署到非根目錄下的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了如何在vue中封裝axios請求并集中管理,w文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解下2023-10-10
這篇文章主要介紹了解決vue下載后臺傳過來的亂碼流的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue-cli打包后本地運行dist文件中的index.html操作
這篇文章主要介紹了vue-cli打包后本地運行dist文件中的index.html操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
下面小編就為大家分享一篇在Vue組件上動態(tài)添加和刪除屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02