vue左右滑动tab(vue-touch)
-SkyBlue- 人气:0下载(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 (){ } }
- 效果
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容