VUE长按事件需求详解


Posted in Javascript onOctober 18, 2017

在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求。

 需求一:长按数字累加或者累减

VUE长按事件需求详解

HTML:

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
   <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart="Loop_Sub(item.CartID)" @touchend="clearLoop()">-</button>
   <input class="mui-numbox-input" type="number" :value="item.Cart_Nums"/>
   <button class="mui-btn mui-numbox-btn-plus" type="button" @touchstart="Loop_Add(item.CartID)" @touchend="clearLoop()">+</button>
</div>

JS:

var vm = new Vue({     
el: "#vue-container",
  data:{


Loop:null

},

methods:{//长按添加数量


Loop_Add:function(ID){



//设置数量



clearInterval(vm.Loop);//再次清空定时器,防止重复注册定时器



$target=$(event.target).parent().find('input');



vm.Loop=setInterval(function(){



$num=$target.val();



$target.val(parseInt($num)+1);



},100);


},


//长按减少数量
  
Loop_Sub:function(ID){



//设置数量



clearInterval(vm.Loop);//再次清空定时器,防止重复注册定时器



$target=$(event.target).parent().find('input');



vm.Loop=setInterval(function(){




$num=$target.val();




if($num>0){





$target.val(parseInt($num)-1);




}else{





clearInterval(vm.Loop);




}
      
//改变点击数



},100);


},


clearLoop:function(){



clearInterval(vm.Loop);


}

}
})

 这个Demo是在移动端测试的,因此使用的是touch事件。方法很简单,touchstart的时候去注册个Interval定时器,touchend的时候再把定时器清除掉,这样就能实现长按持续累加或者累减的效果。

需求二:长按延时事件触发

这类需求也比较简单,和需求一类似。这里拿需求一举例,只需在touchstart添加setTimeout计时器延时事件执行,touchend清除计时器即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
vue router仿天猫底部导航栏功能
Oct 18 #Javascript
Node做中转服务器转发接口
Oct 18 #Javascript
Vue组件之Tooltip的示例代码
Oct 18 #Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 #Javascript
详解vue项目首页加载速度优化
Oct 18 #Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 #Javascript
详解cordova打包成webapp的方法
Oct 18 #Javascript
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
科学发展观活动总结
2014/08/28 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js