快捷導(dǎo)航

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

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

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

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