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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
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
一个域名查询的程序
2006/10/09 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
js中日期的加减法
2015/05/06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
python实现最短路径的实例方法
2020/07/19 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
2014年学习雷锋活动总结
2014/03/01 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
CSS的calc函数用法小结
2022/06/25 HTML / CSS
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python