Vue 自定义移动端的滑动事件

核心代码

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的触屏事件了。

示例(以下滑事件为例)：

<!-- vuetouch为函数名，如没有参数，可直接写函数名 -->
<!-- 如果有参数以对象形式传，fn 为函数名 -->
<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>
vm = new Vue({el:"#app",data:{name:"开始"},methods:{vuetouch:function(s,e){this.name=s.name;}}
});
</script>

Vue 自定义移动端的滑动事件相关推荐

移动端页面滑动事件穿透问题及其解决方案
滑动事件穿透: 在一个可滚动的列表页中打开弹窗,底部的页面理论上是不可滚动的,但是当滑动弹窗时,底部页面会跟随滚动,这就是所谓的页面滚动穿透的问题. 解决方案一: 当弹窗显示时,在父元素上添加fix类 ...
移动端上下拖动调整顺序效果_移动端上下滑动事件之--坑爹的touch.js
移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说 ...
移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
移动端 touch 滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
vue 自定义移动端筛选条件
1.创建组件 components/FilterBar/FilterBar.vue <template><div class="filterbar" :style ...
Vue 自定义指令上报 Google Analytics 事件统计
发现问题一般前端开发离不开数据统计,我们经常需要接入统计服务以方便运营,例如现在需要统计一个按钮 <template><button @click="handleClic ...
vue自定义组件的点击事件失效
在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用.但是使用组件时很可能又会给该组件添加点击事件.如果直接这样写,事件则会失效: 正确写法应该是这样:
Vue实现移动端开屏广告+滑动登录
Vue实现了移动端开屏广告+滑动登录 2020-03-16 颓废了一天,今天做一个移动端的小Demo,因为脚手架占的空间比较大,就使用引入cdn的方式了,方便快捷一点.先上效果图源码在https:/ ...
vue用户行为收集_vue 实现移动端键盘搜索事件监听
1.首先注意,input的type="serch" 2.监听keypress事件 (1)KeyDown.KeyUp 事件这些事件是当一个对象具有焦点时按下 ( KeyDown ) ...
vue滑动窗口_vue-floating 浮窗组件、封装基于better-scroll的滑动组件、vue自定义手势指令...
本篇主要是为了介绍和如何使用之前撸的三个vue在移动端常用的组件,现已开源,欢迎大家使用: 一个基于vue的浮窗组件,可在屏幕内自由拖拽,拖拽后的位置即可不变,也可在移动过程中手指释放浮窗横向贴边. ...

Vue 自定义移动端的滑动事件

Vue 自定义移动端的滑动事件相关推荐

最新文章

热门文章

Vue 自定义移动端的 滑动事件

Vue 自定义移动端的 滑动事件相关推荐

最新文章

热门文章

Vue 自定义移动端的滑动事件

Vue 自定义移动端的滑动事件相关推荐