vue如何实现左右滑动tab(vue-touch)
更新时间：2022年07月21日 11:24:56 作者：-SkyBlue-
这篇文章主要介绍了vue如何实现左右滑动tab(vue-touch)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
下载（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 如何从单页应用改造成多页应用，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要给大家介绍了关于vue3实战教程之axios的封装和环境变量的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了使用vue和element-ui上传图片及视频文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
虽然Vue.js作为一个现代化的前端框架,鼓励使用其自身的响应式机制来处理DOM操作,但在某些情况下,尤其是在需要维护旧系统的项目中,可能会遇到需要引入jQuery的情况,本文将详细讲解如何在Vue项目中引入jQuery,需要的朋友可以参考下2024-09-09
这篇文章为大家详细介绍了vue.js中$watch的用法，文中给出了示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友们可以一起看看吧。2016-10-10
这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
这篇文章主要为大家详细介绍了vue实现员工信息录入功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
table作为数据展示组件,在日常开发中经常被用到,这篇文章主要给大家介绍了关于vue.js管理后台table组件封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了vue返回上一页面时回到原先滚动的位置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue(element ui)el-table树形表格展示以及数据对齐方式
这篇文章主要介绍了vue(element ui)el-table树形表格展示以及数据对齐方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论