vue如何實現左右滑動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將要實現滑動的區域包住 並綁定相應事件)
<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 (){
}
}
- 效果
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。