快捷導(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'})

開(kāi)始使用

(用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)開(kāi)始
panmove	拖動(dòng)過(guò)程
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ì)（越來(lái)越近）移動(dòng)或相向（越來(lái)越遠(yuǎn)）移動(dòng)時(shí)事件
pinchstart	多點(diǎn)觸控開(kāi)始
pinchmove	多點(diǎn)觸控過(guò)程
pinchend	多點(diǎn)觸控結(jié)束
pinchcancel	多點(diǎn)觸控取消
pinchin	多點(diǎn)觸控時(shí)兩手指越來(lái)越近
pinchout	多點(diǎn)觸控時(shí)兩手指越來(lái)越遠(yuǎn)
press	在指定的 DOM 區(qū)域內(nèi)，這個(gè)事件相當(dāng)于 PC 端的 Click 事件，不能包含任何的移動(dòng)，最小按壓時(shí)間為 500ms，常用于我們?cè)谑謾C(jī)上用的復(fù)制粘貼等功能
pressup	點(diǎn)擊事件離開(kāi)時(shí)觸發(fā)
tap	在指定的 DOM 區(qū)域內(nèi)，一個(gè)手指輕拍或點(diǎn)擊時(shí)觸發(fā)該事件（類(lèi)似 PC 端的 click），該事件最大點(diǎn)擊時(shí)間為 250ms，如果超過(guò) 250ms 則按 press 事件處理
rotate	在指定的 DOM 區(qū)域內(nèi)，當(dāng)兩個(gè)手指或更多手指呈圓型旋轉(zhuǎn)時(shí)觸發(fā)
rotatestart	旋轉(zhuǎn)開(kāi)始
rotatemove	旋轉(zhuǎn)過(guò)程
rotateend	旋轉(zhuǎn)結(jié)束
rotatecancel	旋轉(zhuǎn)取消

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