Vue如何用vue-touch实现左右滑动切换tab功能？

本文共计1136个文字，预计阅读时间需要5分钟。

目录 + 下载（vue-touch） + 在main.js中引入 + 开始使用vue-touch + 相关事件 + 开始使用tab切换 + 下载（vue-touch） + npm install vue-touch@next --save + main.js中引入 + import VueTouch from 'vue-touch' + Vue.use(VueTouch, {name: 'v-touch'})

目录

• 下载（vue-touch）
• main.js中引入
• 开始使用
• vue-touch 的相关事件
• 开始做tab切换

下载（vue-touch）

npm install vue-touch@next --save

main.js中引入

import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'})

开始使用

(用v-touch将要实现滑动的区域包住 并绑定相应事件)

<v-touch @swipeleft='left' @swiperight='right'>             <div class="tablBox" v-if="index == 0">                 1巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉             </div>             <div class="tablBox" v-if="index == 1">                 2巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉             </div>             <div class="tablBox" v-if="index == 2">                 3巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉             </div>             <div class="tablBox" v-if="index == 3">                 4巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉             </div> </v-touch>

vue-touch 的相关事件

事件名称事件描述pan在指定的 DOM 区域内，一个手指放下并移动事件，即触屏中的拖动事件panstart拖动开始panmove拖动过程panend拖动结束pancancel拖动取消panleft向左拖动panright向右拖动panup向上拖动pandown向下搬动swipe在指定的 DOM 区域内，一个手指快速的在触屏上滑动，即平时用到最多的滑动事件swipeleft向左滑动swiperight向右滑动swipeup向上滑动swipedown向下滑动pinch在指定的 DOM 区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件pinchstart多点触控开始pinchmove多点触控过程pinchend多点触控结束pinchcancel多点触控取消pinchin多点触控时两手指越来越近pinchout多点触控时两手指越来越远press在指定的 DOM 区域内，这个事件相当于 PC 端的 Click 事件，不能包含任何的移动，最小按压时间为 500ms，常用于我们在手机上用的复制粘贴等功能pressup点击事件离开时触发tap在指定的 DOM 区域内，一个手指轻拍或点击时触发该事件（类似 PC 端的 click），该事件最大点击时间为 250ms，如果超过 250ms 则按 press 事件处理rotate在指定的 DOM 区域内，当两个手指或更多手指呈圆型旋转时触发rotatestart旋转开始rotatemove旋转过程rotateend旋转结束rotatecancel旋转取消

开始做tab切换

• html

<template> <div> <div class="tabls"> <div class="li" :class="{'as':index == i}" v-for="(t,i) in tabls" :key='i' @click="click(i)">{{t}}</div> </div> <v-touch @swipeleft='left' @swiperight='right'> <div class="tablBox" v-if="index == 0"> 1巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 </div> <div class="tablBox" v-if="index == 1"> 2巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 </div> <div class="tablBox" v-if="index == 2"> 3巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 </div> <div class="tablBox" v-if="index == 3"> 4巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 </div> </v-touch> </div> </template>

• css

.tablBox{ width:98%; height: 200px; margin: 0 auto; border: 1px solid #007AFF; box-shadow: 1px 1px 1px #007AFF; border-radius: 5px; } .tabls{ width: 98%; margin: 10px auto; display: flex; flex-direction: row; justify-items: flex-start; } .tabls .li{ padding: 5px; margin: 0 5px; font-size: 16px; } .tabls .li.as{ color: #007AFF; border-bottom:1px solid #007AFF; box-shadow: 1px 1px 1px #ccc; }

• js

export default { data() { return { index:0, oldIndex:0, tabls:['1','2','3','4'] }; }, methods: { left(){ this.index+=1; if (this.index > (this.tabls.length -1)) { this.index = 0; } }, right(){ this.index-=1; if (this.index < 0) { this.index = (this.tabls.length -1); } }, click(i){ this.index = i; } }, created() { }, mounted (){ } }

• 效果

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。