vue如何实现左右滑动tab(vue-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 (){
		
	}
  }

效果

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

查看更多关于vue如何实现左右滑动tab(vue-touch)的详细内容...