Vue實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果的方法
1. 最近得到一個(gè)新需求，需要在Vue項(xiàng)目的移動(dòng)端頁面上加上左右滑動(dòng)效果，在網(wǎng)上查閱資料，最終鎖定了vue-touch
2. 下載vue-touch （https://github.com/vuejs/vue-touch/tree/next） 注意：如果Vue是2.x 的版本的話，一定要下next分支上的。
3. 使用：
3.1 npm install vue-touch@next --save
3.2 在main.js 中 引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
VueTouch.config.swipe = {
threshold: 100 //手指左右滑動(dòng)距離
}
3.3 在左右滑動(dòng)頁面的父頁面使用,如：
<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
<router-view></router-view>
</v-touch>
左滑事件：swipeleft， 右滑事件：swiperight， 更多事件請(qǐng)查閱api
4. 注意事項(xiàng)：
使用左右滑動(dòng)之后，發(fā)現(xiàn)不能上下滑動(dòng)了，這是因?yàn)関ue-touch 默認(rèn)禁止了用戶的手勢(shì)操作，注意組件上有個(gè)css屬性：touch-action: none；
把這個(gè)屬性覆蓋一下就好了，如： touch-action: pan-y!important;
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果的方法，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了Vue插槽原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js插槽內(nèi)容、具名插槽、作用域插槽等相關(guān)原理與使用方法,需要的朋友可以參考下2019-03-03
element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果(不顯示秒)
最近遇到這樣的需求使用element的el-date-picker組件,只顯示時(shí)分,不顯示秒,下面小編給大家分享element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果,感興趣的朋友一起看看吧2024-08-08
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
本文給大家介紹了在vue項(xiàng)目中使用svg圖標(biāo)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-04-04
Vue響應(yīng)式原理模擬實(shí)現(xiàn)原理探究
這篇文章主要介紹了Vue響應(yīng)式原理，響應(yīng)式就是當(dāng)對(duì)象本身（對(duì)象的增刪值）或者對(duì)象屬性（重新賦值）發(fā)生了改變的時(shí)候，就會(huì)運(yùn)行一些函數(shù)，最常見的示render函數(shù)2022-09-09
vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子
今天小編就為大家分享一篇vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決vue-photo-preview 異步圖片放大失效的問題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
最近遇見一個(gè)需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種方式
這篇文章主要為大家詳細(xì)介紹了使用Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
本文主要介紹了vue中三種不同插槽使用小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07