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 (){
		
	}
  }

• 效果

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