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 (){ } }

效果

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读

    vue项目一些常见问题

    vue项目一些常见问题,组件,样式,**样式污染问题**同样的样式不需要在每个组件都复制组件内单独的样式加外层class包裹。加scope。否则只是

    01-Vue项目实战-网易云音乐-准备工作

    01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来的一段时间,我会仿照网易云音乐,利用Vue开发一个移动端的网易云音乐项目。在做

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自己的,后台,后台框架一直想开发一套完全属于自己的后台,但是18年的时候,曾经答

    开启快捷键alt加tab|启用alt快捷键

    开启快捷键alt加tab|启用alt快捷键,,1. 启用alt快捷键快捷键Alt+Z,方法如下:1、在win当中找到GeForceExperience。2、进入GeForceExperience

    Vue项目中 App.vue文件

    Vue项目中 App.vue文件,文件,内容, 在App.vue文件中,定义了一个id为app的div,在这个div板块中放置Helloworld组件,文件内容如下图所示:在

    苹果touch3配置|苹果3d touch哪里设置

    苹果touch3配置|苹果3d touch哪里设置,,苹果touch3配置1:ipod touch3是苹果在2009年9月9日(美国西部时间)推出的新款ipod touch播放器。具有

    table设置列宽|table 列宽

    table设置列宽|table 列宽,,table 列宽直接给每一列的第一行设置宽度就可以了,下边的默认与第一行的相同,如果需要修改,在单独设置就可以,下边

    table边框设置|table边框设置成双线

    table边框设置|table边框设置成双线,,1. table边框设置成双线点选表格,菜单--格式--边框和底纹,在线型中往下拉,你会看到双线,选择后确定就行