下载(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 (){
		
	}
  }
  • 效果

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部