请注意:由于之前本人的博文被百度文库收做商用,请各位转载此博客注明出处
最近项目遇见一个需求,需要长按按钮然后一直加减数值,
看了一下uniapp只提供了一个长按时间,等于需求还得自己写
但是长按触发也只是触发一次事件,明显不符合我所需要的一直持续触发数量一直加减
看了一下官方文档,工程化api里面提供了几个触发事件
处理的逻辑就为,用户按下按钮 => 触发了一次长按事件 => 事件持续触发数量一直加减 => 用户停止按按钮
我们在这个逻辑中,是不需要按钮开始事件的,这是一个陷阱,
还有个问题便是,不可使用@click方法,需要使用@tap,不然不会触发单击事件
就是直接长按触发“长按事件”之后在data中定义一个计时器为 null 后续使用
等到长按结束时停止定时器,一整个流程就走完了
逻辑已经有了接下来就是直接贴代码吧
<template> <view>数量: {{ 1 }}</view> <button @tap="numAdd" @longPress="longPress" @touchend="touchend"> 长按触发 </button> </template> <script> export default { data() { return { num: 1, timeOnline: null, }; }, methods: { // 单击事件 numAdd() { that.num = that.num + 1; }, // 长按事件 longPress() { let that = this; that.timeOnline = setInterval(() => { that.num = that.num + 1; }, 200); // 200毫秒触发一次 }, // 长按结束了 touchend() { clearInterval(this.timeOnline); // 清除计时器 }, }, }; </script>
标签:uniapp,触发,加减,num,事件,按钮 From: https://www.cnblogs.com/mlw1814011067/p/16819682.html