微信小程序, 长按加号 不断添加数量

news/2025/4/1 4:23:31/

如图, 需求,长按加号,数量不断增加, 反之减号不断减少

    需要使用 小程序中的长按事件,.bindlongpress, 需要注意的是连续增加一定会用到定时器, 在bindtouchend鼠标一开始需要清理定时器.

html

 <image class="reduce img" bindtap='reducesurplus' bindlongpress='reducelongTap'  bindtouchend='leave' wx:if="{{imgUrl}}" data-index="{{index}}"  src="{{imgUrl}}public/xcxC/houtai/reduce.png"></image><input  class="num" bindinput='numinput' placeholder='0' data-index="{{index}}" value='{{item.num}}'></input><image class="add img" bindtap='addresidue' bindlongpress='addlongTap' bindtouchend='leave' data-index="{{index}}" wx:if="{{imgUrl}}" src="{{imgUrl}}public/xcxC/houtai/add.png"></image>

js

//减少
reducelongTap: function (e) {var index = e.currentTarget.dataset.index,_this = this.data;longTime = setInterval(() => {if (parseInt(_this.para_list[index].num) == 0) {clearInterval(longTime)return;}parseInt(_this.para_list[index].num)_this.para_list[index].num--this.setData({para_list: _this.para_list})}, 200)},
//增加
addlongTap: function (e) {var index = e.currentTarget.dataset.index,_this = this.data;longTime = setInterval(() => {parseInt(_this.para_list[index].num)_this.para_list[index].num++this.setData({para_list: _this.para_list})}, 200)},leave: function (e) {clearInterval(longTime)}

 


http://www.ppmy.cn/news/646408.html

相关文章

微信小程序项目实例——狼人杀

微信小程序项目实例——狼人杀 文章目录 微信小程序项目实例——狼人杀一、项目展示二、首页三、游戏页四、特殊角色文末 项目代码见文字底部&#xff0c;点赞关注有惊喜 一、项目展示 狼人杀是一款多人参与的&#xff0c;通过语言描述推动、较量口才和分析判断能力的策略类桌…

微信红包dome php,微信小程序学习用demo:简易图片动画红包代码

var app getApp(); Page({ data: { userInfo: {}, src: , coverImg:{ hidden: false, top: 0, //上面图片的top值 bottom: 0, //下面图片的bottom值 locked: false //首页展开触摸锁定 }, openPage: app.globalData.openPage1?true:false }, resetCoverImg: function() { thi…

微信小程序源码

下面是所有微信小程序源码以及部分项目的后台源码&#xff0c;因为也是程序员辛苦编程的&#xff0c; 方便大家学习&#xff0c;关注下面公众号后&#xff0c; 发送&#xff1a;我要源码&#xff0c;需要支付19.9元&#xff0c;即可得到下载链接。 │ ├─o2o行业&#xff0…

如何使用微信开发工具进行小程序开发

一、小程序介绍 官方文档&#xff1a;微信开放文档 微信小程序&#xff0c;简称小程序&#xff0c;英文名 MiniProgram &#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用 “ 触手可及 ” 的梦想&#xff0c;用户扫一扫或者搜一下即可打开应用。也体现…

企微主页_企业微信名片对外怎么显示官网和小程序?

当客户添加我们的企业微信时&#xff0c;企业微信的对外名片是客户对我们的第一印象&#xff0c;设置个性化对外名片&#xff0c;有助于客户快速了解企业能够提供的服务&#xff0c;为客户留下美好的第一印象。 上图是两个零售行业企业成员个人名片案例&#xff0c;和微信名片不…

微信小程序基础

一&#xff1a;小程序介绍 1.1小程序简介 小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。 1.2小程序与普通网页开发的区别 小程序 》依赖于微信或其他APP上的一个应用形式&#xff0c;无法脱离其…

华硕ROG幻14 2023原装Windows11系统工厂模式带ASUS RECOVERY功能恢复

第一步&#xff1a;下载原装系统文件&#xff08;工厂包&#xff09; 第二步&#xff1a;华硕天选冰刃魔霸枪神灵耀等 需要自备16g空u盘安装 第三步&#xff1a;创建u盘分区&#xff0c;第一个分区格式为FAT32(存放TLK引导文件)&#xff0c;第二个分区大小为NTFS&#xff08…

微软windows系统保留分区-Microsoft Reserved(MSR分区)

保留分区一般大小为16MB左右 这时候如果没什么重要资料建议快速分区 否则就找到C盘格式化 16MB左右 Linux系统 --------------------------------------------------------------------------------------------------------------------- ---------------------------------…