溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1. 最近得到一個新需求，需要在Vue項目的移動端頁面上加上左右滑動效果，在網上查閱資料，最終鎖定了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. 注意事項：
使用左右滑動之后，發現不能上下滑動了，這是因為vue-touch 默認禁止了用戶的手勢操作，注意組件上有個css屬性：touch-action: none；
把這個屬性覆蓋一下就好了，如： touch-action: pan-y!important;
總結
以上所述是小編給大家介紹的Vue實現移動端左右滑動效果的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
