这篇文章主要介绍了vue如何实现左右滑动tab(vue-touch)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
- 下载（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 | 旋转取消 |
开始做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 (){
}
}
- 效果
以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- Vue实现tab导航栏并支持左右滑动功能
- Vue实现移动端左右滑动效果的方法
- vue可滑动的tab组件使用详解
