vue如何實(shí)現(xiàn)左右滑動tab(vue-touch)

更新時間：2022年07月21日 11:24:56 作者：-SkyBlue-

這篇文章主要介紹了vue如何實(shí)現(xiàn)左右滑動tab(vue-touch)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

下載（vue-touch）

npm install vue-touch@next --save

main.js中引入

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

開始使用

(用v-touch將要實(shí)現(xiàn)滑動的區(qū)域包住并綁定相應(yīng)事件)

<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 的相關(guān)事件

事件名稱	事件描述
pan	在指定的 DOM 區(qū)域內(nèi)，一個手指放下并移動事件，即觸屏中的拖動事件
panstart	拖動開始
panmove	拖動過程
panend	拖動結(jié)束
pancancel	拖動取消
panleft	向左拖動
panright	向右拖動
panup	向上拖動
pandown	向下搬動
swipe	在指定的 DOM 區(qū)域內(nèi)，一個手指快速的在觸屏上滑動，即平時用到最多的滑動事件
swipeleft	向左滑動
swiperight	向右滑動
swipeup	向上滑動
swipedown	向下滑動
pinch	在指定的 DOM 區(qū)域內(nèi)，兩個手指（默認(rèn)為兩個手指，多指觸控需要單獨(dú)設(shè)置）或多個手指相對（越來越近）移動或相向（越來越遠(yuǎn)）移動時事件
pinchstart	多點(diǎn)觸控開始
pinchmove	多點(diǎn)觸控過程
pinchend	多點(diǎn)觸控結(jié)束
pinchcancel	多點(diǎn)觸控取消
pinchin	多點(diǎn)觸控時兩手指越來越近
pinchout	多點(diǎn)觸控時兩手指越來越遠(yuǎn)
press	在指定的 DOM 區(qū)域內(nèi)，這個事件相當(dāng)于 PC 端的 Click 事件，不能包含任何的移動，最小按壓時間為 500ms，常用于我們在手機(jī)上用的復(fù)制粘貼等功能
pressup	點(diǎn)擊事件離開時觸發(fā)
tap	在指定的 DOM 區(qū)域內(nèi)，一個手指輕拍或點(diǎn)擊時觸發(fā)該事件（類似 PC 端的 click），該事件最大點(diǎn)擊時間為 250ms，如果超過 250ms 則按 press 事件處理
rotate	在指定的 DOM 區(qū)域內(nèi)，當(dāng)兩個手指或更多手指呈圓型旋轉(zhuǎn)時觸發(fā)
rotatestart	旋轉(zhuǎn)開始
rotatemove	旋轉(zhuǎn)過程
rotateend	旋轉(zhuǎn)結(jié)束
rotatecancel	旋轉(zhuǎn)取消

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