下载（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>


.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;
}

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

效果

定位 skyblue

vue实现左右滑动tab（vue-touch）相关推荐

Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
Vue实现图片滑动验证
Vue实现图片滑动验证使用vue完成使用vue完成实习一个星期小白对工作安排的图片滑动验证分享 1.安装依赖附上:https://www.npmjs.com/package/vue-monop ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
vue实现图片滑动验证功能——功能实现
图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册.登录.灌水. 目前vue技术日趋成熟,已经有专门针对图片滑动验证功能的插件了.具体使用方式如下: 1.安装插件--npm ...
vue监听浏览器tab切换
vue监听浏览器tab切换描述监听tab切换浏览器页面,在离开当前页面和再次进来发生事件监听,类似与小程序的show函数 visibilitychange 详解解决 created() {doc ...
vue 登录模块滑动验证
vue 登录模块滑动验证借助阿里云云盾开发首先登陆账号开通验证码服务 https://yundun.console.aliyun.com/?spm=5176.2020520162.categori ...
vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
Vue实现图形滑动验证
最近在项目中使用到图形验证来避免用户过多的重复操作,此功能没有使用到后端,单纯的前端实现,由于自己写的话时间来不及,所以这里用到了vue的组件库 vue-monoplasty-slide-verify ...

vue实现左右滑动tab（vue-touch）

定位 skyblue

vue实现左右滑动tab（vue-touch）相关推荐

最新文章

热门文章