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