vue touchmove,vue touchend

  vue touchmove,vue touchend

  这篇文章主要介绍了某视频剪辑软件绑定使用触摸开始触摸移动触摸结束解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  

目录

   绑定使用触摸开始触摸移动触摸结束解决触摸开始触摸结束事件无效失效

  

绑定使用 touchstart touchmove touchend

  今天要做一个页面差异长按后触发事件,简单学习后实现如下:

  先看代码:

  模板

  差异

  div class= test @ touch start= gtouchstart() @ touch move= gtouchmove() @ touch end= gtouchend()试一试呀!/div

  /div

  /模板

  脚本

  导出默认值{

  data () {

  返回{

  }

  },

  方法:{

  gtouchstart(){

  window.console.log(1,按下啦啦啦啦啦)

  },

  gtouchmove(){

  window.console.log(2,按下并且在移动呢)

  },

  gtouchend(){

  window.console.log(3,松开啦啦啦啦啦)

  }

  }

  }

  /脚本

  样式范围。测试{

  宽度:100%;

  高度:50px

  文本对齐:居中;

  背景色:红色;

  行高:50px

  字体大小:50px

  }

  /风格

  看结果:

  鼠标在红色区域内按下会输出1,

  按下鼠标不松开然后移动会输出2,

  松开后就会输出3,

  根据自己的情况在三个函数里写入相应的功能。

  

解决touchstart touchend事件无效失效

  货车按钮

  :disabled=isLoading

  平原

  type=info

  @触摸开始。本地人。防止=触摸开始

  @触摸结束。本地人。防止=触摸结束

  style= width:40%;高度:40px

  圆形物对比原图

  /货车按钮

  @触摸开始。本地人。prevent="触摸开始"

  @触摸结束。本地人。防止="触摸结束"

  增加。原生。预防

  touchstart() {

  console.log(touchstart )

  },

  touchend() {

  console.log(touchend )

  },

  以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: