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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
js设置随机切换背景图片的简单实例
Nov 12 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
JavaScript中使用import 和require打包后实现原理分析
Mar 07 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
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
深入理解React高阶组件
2017/09/28 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
小区门卫岗位职责
2013/12/31 职场文书
上学迟到的检讨书
2014/01/11 职场文书
活动策划求职信模板
2014/04/21 职场文书
企业挂职心得体会
2014/09/10 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Vue操作Storage本地化存储
2022/04/29 Vue.js
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL
Python代码实现双链表
2022/05/25 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS