基于原生vue自定义移动端touch事件，点击、滑动、长按事件

**HTML**<!DOCTYPE html><html><head><meta charset="UTF-8"><link href="favicon.ico" mce_href="favicon.ico" re

WebCsDn_TDCode

4829人浏览 · 2018-09-30 16:40:57

WebCsDn_TDCode · 2018-09-30 16:40:57 发布

**HTML**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
		<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
		<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--引入vue-->
		<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js" type="text/javascript" charset="utf-8"></script>			
	</head>
<style type="text/css">
	#app{
		height: 35rem;
		background-color: red;
		color: #fff;
		text-align: center;
		line-height: 5rem;
	}
</style>
	<body>
		<!--mvvm-->
		<!--view -->
		<script type="text/javascript">
			if (!localStorage.user_id) {
				location.href = "../../new_file.html";
			}
		</script>
		<div id="app" class="box" v-tap="vuetouch"
		    v-longtap="{fn:vuetouch,name:'长按'}"
		    v-swipeleft="{fn:vuetouch,name:'左滑'}"
		    v-swiperight="{fn:vuetouch,name:'右滑'}"
		    v-swipeup="{fn:vuetouch,name:'上滑'}"
		    v-swipedown="{fn:vuetouch,name:'下滑'}"
		>
		{{ name }}
		
		
		</div>
		<script src="touch.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			new Vue({
			    el:"#app",
			    data:{
			        name:"开始"
			    },
			    methods:{
			        vuetouch:function(s,e){
			            this.name=s.name;
			        }
			    }
			});
		</script>
	</body>

</html>

js核心内容touch.js

function vueTouch(el,binding,type){//触屏函数
    var _this=this;
    this.obj=el;
    this.binding=binding;
    this.touchType=type;
    this.vueTouches={x:0,y:0};//触屏坐标
    this.vueMoves=true;
    this.vueLeave=true;
    this.vueCallBack=typeof(binding.value)=="object"?binding.value.fn:binding.value;
    this.obj.addEventListener("touchstart",function(e){
        _this.start(e);
    },false);
    this.obj.addEventListener("touchend",function(e){
        _this.end(e);
    },false);
    this.obj.addEventListener("touchmove",function(e){
        _this.move(e);
    },false);
};
vueTouch.prototype={
    start:function(e){//监听touchstart事件
        this.vueMoves=true;
        this.vueLeave=true;
        this.longTouch=true;
        this.vueTouches={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY};
        this.time=setTimeout(function(){
            if(this.vueLeave&&this.vueMoves){
                this.touchType=="longtap"&&this.vueCallBack(this.binding.value,e);
                this.longTouch=false;
            };
        }.bind(this),1000);
    },
    end:function(e){//监听touchend事件
        var disX=e.changedTouches[0].pageX-this.vueTouches.x;//计算移动的位移差
        var disY=e.changedTouches[0].pageY-this.vueTouches.y;
        clearTimeout(this.time);
        if(Math.abs(disX)>10||Math.abs(disY)>100){//当横向位移大于10，纵向位移大于100，则判定为滑动事件
            this.touchType=="swipe"&&this.vueCallBack(this.binding.value,e);//若为滑动事件则返回
            if(Math.abs(disX)>Math.abs(disY)){//判断是横向滑动还是纵向滑动
                if(disX>10){
                    this.touchType=="swiperight"&&this.vueCallBack(this.binding.value,e);//右滑
                };
                if(disX<-10){
                    this.touchType=="swipeleft"&&this.vueCallBack(this.binding.value,e);//左滑
                };
            }else{
                if(disY>10){
                    this.touchType=="swipedown"&&this.vueCallBack(this.binding.value,e);//下滑
                };
                if(disY<-10){
                    this.touchType=="swipeup"&&this.vueCallBack(this.binding.value,e);//上滑
                };  
            };
        }else{
            if(this.longTouch&&this.vueMoves){
                this.touchType=="tap"&&this.vueCallBack(this.binding.value,e);
                this.vueLeave=false
            };
        };
    },
    move:function(e){//监听touchmove事件
        this.vueMoves=false;
    }
};
Vue.directive("tap",{//点击事件
    bind:function(el,binding){
        new vueTouch(el,binding,"tap");
    }
});
Vue.directive("swipe",{//滑动事件
    bind:function(el,binding){
        new vueTouch(el,binding,"swipe");
    }
});
Vue.directive("swipeleft",{//左滑事件
    bind:function(el,binding){
        new vueTouch(el,binding,"swipeleft");
    }
});
Vue.directive("swiperight",{//右滑事件
    bind:function(el,binding){
        new vueTouch(el,binding,"swiperight");
    }
});
Vue.directive("swipedown",{//下滑事件
    bind:function(el,binding){
        new vueTouch(el,binding,"swipedown");
    }
});
Vue.directive("swipeup",{//上滑事件
    bind:function(el,binding){
        new vueTouch(el,binding,"swipeup");
    }
});
Vue.directive("longtap",{//长按事件
    bind:function(el,binding){
        new vueTouch(el,binding,"longtap");
    }
});

将以上代码保存到一个js文件内，引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^