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 的相关事件

开始做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 (){

	}
  }

• 效果

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