下载(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 的相关事件
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 | 旋转取消 |
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 (){
}
}
效果
以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。