vue触摸事件 - CSDN
精华内容
参与话题
  • 如何在vue中使用触摸事件

    千次阅读 2018-11-19 09:36:22
    为何用到了touch事件 在项目中,用mint-ui做了一个下拉刷新的功能。在其他手机都可以,但是在iphonex上当下拉到虚拟键位置,下拉框就会卡住,不会回弹。所以为了不让用户下拉到虚拟键设置了下拉高度和回弹的最大距离...

    为何用到了touch事件

    在项目中,用mint-ui做了一个下拉刷新的功能。在其他手机都可以,但是在iphonex上当下拉到虚拟键位置,下拉框就会卡住,不会回弹。所以为了不让用户下拉到虚拟键设置了下拉高度和回弹的最大距离,用到了touch事件。

    touch事件

    最基本的touch事件有四个:

    • touchstart

    当在屏幕上按下手指时触发

    • touchmove

    当在屏幕上移动手指时触发

    • touchend

    当在屏幕上抬起手指时触发

    • touchcancel

    当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作

    它们的触发顺序是touchstart–>touchmove–>touchend

    touch可以产生一个TouchEvent对象。

    注意:在很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作)。如果你使用了触摸事件,可以调用 event.preventDefault()来阻止鼠标事件被触发。(我认为可能上拉下的过程中触发了点击事件,所以下拉不回弹。)

    如何在Vue中监听touch事件

    	/**
    	 * [TouchMove 监听touch事件]
    	 */
    	 TouchMove () {
    	   this.$refs.idealist.addEventListener('touchmove', this.handleTouchMove, false)
    	   this.$refs.idealist.addEventListener('touchstart', this.handleTouchStart, false)
    	   this.$refs.idealist.addEventListener('touchend', this.handleTouchtouchend, false)
    	 }
    

    mounted中调用this.TouchMove().然后在methods里面写入你想要监听事件的方法。我这里应用到了touchmovetouchstart

    	/**
         * [handleTouchStart 记录Touch开始的Y轴数值]
         */
        handleTouchStart (event) {
          this.startY = event.touches[0].clientY
        },
        /**
         * [handleTouchMove 监听touchmove时Y轴的数值]
         */
        handleTouchMove (event) {
          if (event.touches[0].clientY - this.startY > 300) {
            this.lodTopBool = true
            this.$refs.loadmoretwo.onTopLoaded()
            this.allLoaded = false
            this.page = 1
            this.pageSize = 20
            setTimeout(() => {
              this.lodTopBool = false
            }, 300)
            this.loadTopList()
          }
        }
    
    • clientX:触摸目标在视口中的x坐标。
    • clientY:触摸目标在视口中的y坐标。
    • identifier:标识触摸的唯一ID。
    • pageX:触摸目标在页面中的x坐标。
    • pageY:触摸目标在页面中的y坐标。
    • screenX:触摸目标在屏幕中的x坐标。
    • screenY:触摸目标在屏幕中的y坐标。
    • target:触目的DOM节点目标。
      这样就实现了在vue中监听touch事件,超过一定距离下拉刷新自动回弹刷新的功能。
    展开全文
  • 主要思路为,首先监听触屏事件touchstart这样可以获取用户点击屏幕的位置,然后监听touchend与touchmove事件这样可以获取用户触屏结束后的位置,这样就可以计算出用户在屏幕上滑动的方向。最后通过vue的自定义事件,...
    主要思路为,首先监听触屏事件touchstart这样可以获取用户点击屏幕的位置,然后监听
    touchend与touchmove事件这样可以获取用户触屏结束后的位置,
    这样就可以计算出用户在屏幕上滑动的方向。最后通过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的触屏事件了。

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

    <div @swipedown="swipe(x)">00</div>

    展开全文
  • vue 触摸禁用事件

    千次阅读 2019-06-21 20:27:52
    <div class="ctype_dialog" @touchmove.prevent>

    <div class="ctype_dialog" @touchmove.prevent>

    展开全文
  • vue移动端touch事件

    千次阅读 2019-02-26 16:18:23
    开始事件是 @touchstart; 移动事件是 @touchmove; 结束事件是 @touchend;

    开始事件是 @touchstart;

    移动事件是 @touchmove;

    结束事件是 @touchend;

    // 获取事件对象
     @touchend="touchend($event)"
    
    展开全文
  • **Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch** 这是一个用vue.js写的一个仿滑动解锁的demo,和对Touch的一些理解以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕...
  • 在web或移动端开发中,有时候我们需要做一个可滚动显示的banner、轮播、滑动翻页显示内容等,常用的插件就数swiper。当然如果我不想因为一个小的页面去引入一个库,那么... 核心触摸事件:touchstart、touchmove和to...
  • 阻止vue移动端滑动事件穿透

    千次阅读 2019-06-11 13:41:53
    直接在遮罩层上面使用vue的“阻止默认事件”:@touchmove.prevent 2. 遮罩层有滚动条,也需要响应滑动。在遮罩层出现的时候给遮罩层下面的区域css样式实现绝对定位,定在页面中,遮罩层消失的时候。移除样式。 css ...
  • vue中v-touch事件用法

    千次阅读 2019-07-26 14:29:11
    vue中v-touch事件用法 1.先下载 cnpm install vue-touch@next --save dev 2.在main.js引入 import VueTouch from 'vue-touch' Vue.use(VueTouch, { name: 'v-touch' }) 3.用法 <v-touch v-on:swipeup="go...
  • vue 点击;双击;鼠标事件

    千次阅读 2019-01-30 19:56:42
    事件是文档或者浏览器窗口中发生的,特定的交互瞬间。 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间交互的桥梁。 你若触发,我便执行——事件发生,...
  • 解决百度地图 手机端 点击事件不触发 的一种方案 ...我是半路接手的这个项目,该项目使用 Vue 开发的一款 手机端的页面。到手里时,使用百度地图的部分已经完成,之前的兄弟在开发是一只都是在 PC 端用浏览器的手机...
  • vue 插件集合

    万次阅读 多人点赞 2017-10-11 19:01:26
    Vue2.0+组件库总结   鲁大师666 关注 2017.05.05 10:46 字数 3121 阅读 5583评论 1喜欢 28 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint...
  • VUE常用插件库总结

    万次阅读 2020-09-03 00:12:15
    一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ... vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...
  • vue插件大全汇总,你要的都这里,赶紧收藏下!

    万次阅读 多人点赞 2019-04-30 09:33:53
    Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作和学习。很全的vue插件...
  • vue开发一个实用美观的轮播图组件

    千次阅读 2019-06-06 16:48:54
    网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用。 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组件中...
  • vue相关UI组件库及实用案例

    万次阅读 2020-10-13 09:28:06
    element - 饿了么出品的Vue2的web UI工具套件 vant - vue的移动ui组件 vant-weapp - vue的微信小程序组件 iview - vue webUI组件(适用pc端和后台系统界面开发 ) iview weapp - vue的微信小程序组件 Vux -...
  • vue实现单击、双击、鼠标事件

    千次阅读 2019-05-06 15:56:16
    附有同一文件夹下的html文件、js文件和css文件 注释说的很详细 index.html的代码 <!DOCTYPE html> <html lang="en"> <head>...vue</title> <link rel="stylesheet" href...
  • vuejs 移动端解决click 300ms延迟

    千次阅读 2017-08-15 19:12:51
    fastclick插件 npm install --save fastclick 在main.js中import fastclick from 'fastclick' fastclick.attach(document.body) 也可以直接下载fastclick.js,在相应页面直接引用
  • 基于vue的下拉刷新&滚动刷新指令

    万次阅读 多人点赞 2016-12-22 15:22:20
    基于vue的下拉刷新&滚动刷新指令
  • vue自定义移动端touch事件,点击、滑动、长按事件

    万次阅读 热门讨论 2019-01-03 11:16:35
    vue移动的自定义touch事件,包括点击,滑动,左滑,右滑,上滑,下滑,长按
  • vue2引入外部js文件(以hammer.js为例)

    千次阅读 2017-11-21 14:26:30
    之前一篇博客写了怎么让vue用hammer封装触摸事件 但是怎么把外部的这个hammer.js文件融入vue-cil中呢? 下面是步骤 基本命令: vue init webpack hxammerdemo cd hxammerdemo/ cnpm install 新建红框内...
1 2 3 4 5 ... 20
收藏数 3,839
精华内容 1,535
热门标签
关键字:

vue触摸事件