【微信小程序】解决点击(bindtap)和长按(bindlongtap)冲突

news2024/9/27 9:21:57

点击事件的执行:

<button bindtap="bindtap" bindtouchstart="touchstart" bindtouchend="touchend">按钮</button>

在这里插入图片描述

可以看到顺序为:touchstart → touchend → tap

长按事件的执行:

 <button bindtap="bindtap" bindlongtap="bindlongtap" bindtouchstart="touchstart" bindtouchend="touchend">按钮</button>

在这里插入图片描述

可以看到顺序为:touchstart → longtap → touchend → tap

当我们在一个标签上同时设置bindtapbindlongtap时, 会发现长按时先触发bindlongtap的事件,松开后还会触发tap事件,就没有达到预期的效果。

场景:一个按钮长按时颜色发生变化,松开时颜色恢复,并且点击时无任何变化

思路:在data中用一个状态去维护,长按与松开时去改变这个状态然后控制颜色的变化

实现:

 <button bindlongtap="bindlongtap" bindtouchend="touchend" style="background-color: {{active? '#10C0D6' : '#e7fafd'}};"> </button>
data: {
	active: false
},

bindlongtap() {
	this.setData({active: !this.data.active})
},

touchend() {
	this.setData({active: !this.data.active})
}

可以发现长按与松开时确实达到了我们想要的效果,但是当我们点击按钮时,按钮的颜色也发生了变化,原因就是点击的时候也触发了touchend事件导致状态发生改变,没有达到我们的需求。

那么要如何判断是长按还是点击触发的touchend事件?

在这里插入图片描述
官方给出的界定是从触摸开始到触摸结束要超过350ms就是长按

那么我们可以在触摸开始的时候记录一个时间,在触摸结束的时候记录一个时间,借助事件对象的参数timeStamp

在这里插入图片描述

 <button bindlongtap="bindlongtap" bindtouchstart="touchstart" bindtouchend="touchend" style="background-color: {{active? '#10C0D6' : '#e7fafd'}};"> </button>
data: {
	active: false,
	startTimeStamp:0
},

bindlongtap() {
	this.setData({active: !this.data.active})
},

touchstart(e) {
  this.setData({startTimeStamp:e.timeStamp})
},

touchend(e) {
  if(e.timeStamp - this.data.startTimeStamp < 350) {
      return false
    } else {
      this.setData({active: !this.data.active})
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/187013.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Blender 渲染与后期处理

文章目录旋转环境贴图&#xff08;天空盒&#xff09;物体只渲染其他物体的阴影而不渲染自身渲染一个背景透明的图片在后期合成中&#xff0c;将渲染结果和一张图片合成到一起输出不同的通道方法一方法二后期制作景深效果渲染单个图层图层渲染单个图层旋转环境贴图&#xff08;…

对程序员超有用的网站!一定要收藏起来!

作为一名专业的程序员&#xff0c;我们应该利用各种渠道来扩充自己的知识。然后做一个技术高超的打工人&#xff01;&#xff08;&#xff09;然后用自己超高的技术&#xff0c;赚超多超多的money! (√) 但是要获取大量的信息就要有优质可靠的信息来源。今天我就把我珍藏的&…

CMOS图像传感器——深入ISO

在之前讲Dual Gain这一HDR技术时,有大致提到过ISO: HDR 成像技术学习(二)_沧海一升的博客-CSDN博客HDR成像技术介绍:staggered HDR、DOL-HDR、DCG,双原生ISO等。https://blog.csdn.net/qq_21842097/article/details/120904447 这一篇文章我们深入讲解一下。 通常…

IP协议详解

IP协议 IP协议格式&#xff1a; 4位版本号&#xff1a;指定IP协议的版本&#xff0c;对于IPv4来说&#xff0c;就是4。 4位首部长度&#xff1a;IP头部的长度是多少个32bit(4字节)&#xff0c;也就是 length * 4 的字节数。4bit表示最大的数字是15&#xff0c;因此IP头部最大…

学会这几招,轻松提升办公效率

技巧一&#xff1a;录屏 录屏需要使用“第三方工具/插件”吗&#xff1f;其实&#xff0c;PPT中有一个内置的“录屏”工具&#xff01; 使用PPT自带的“录屏”工具可以帮助我们快速录制电脑屏幕上的内容&#xff0c;录屏后的录屏结果会自动添加到PPT中&#xff0c;非常适合在PP…

JavaWeb_HTTP+Tomcat+Servlet

一、JavaWeb技术栈 B/S 架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器 架构模式&#xff0c;它的特点是&#xff0c;客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器&#xff0c;获取Web资源&#xff0c;服务器把We…

第三章.逻辑回归—正确率/召回率/F1指标,非线性逻辑回归代码

第三章.逻辑回归 3.2 正确率/召回率/F1指标 正确率(Precision)和召回率(Recall)广泛应用于信息检索和统计学分类领域的两个度量值&#xff0c;用来评价结果的质量。 1.概念&#xff1a; 1).正确率&#xff1a; 检索出来的条目有多少是正确的 2).召回率&#xff1a; 所有正…

Notepad++ 编写html代码快捷键切换到浏览器查看

一、设置Notepad 快速启动浏览器并且运行html1.找到Notepad的安装路径&#xff0c;找到Notepad 的shortcuts.xml文件。2.如图所示&#xff0c;用记事本打开【千万不要用Notepad打开】。打开之后可以看到里面的代码。以启动连接 chrome浏览器为例&#xff0c;选择对应的chrome 代…

【金融学】Financial Markets

Financial MarketsClass1 Financial Markets IntroductionWhat is Financial MarketsFinancial Topics课程目标Class1 Financial Markets Introduction What is Financial Markets “金融不仅仅是关于赚钱&#xff0c;金融应该是关于使某事发生” ----Robert Shiller. Financi…

TCP的3次握手细节

一、什么是TCP的三次握手在网络数据传输中&#xff0c;传输层协议TCP是要建立连接的可靠传输&#xff0c;TCP建立连接的过程&#xff0c;我们称为三次握手。三次握手的具体细节1. 第一次握手&#xff1a;Client将SYN置1&#xff0c;随机产生一个初始序列号seq发送给Server&…

虹科方案|使用 Thunderbolt™ 实现 VMware vSAN™ 连接

一、引言ATTO的Thunderbolt支持VMware ESXi 和ThunderLink产品线&#xff0c;使我们能够创建基于Mac的vSphere设置&#xff0c;从而能够为我们的macOS服务器提供虚拟化服务。 将虚拟硬件、快照和Veeam备份与macOS服务器的简单性相结合&#xff0c;将改变SMB市场的游戏规则。二、…

SVPWM控制技术+Matlab/Simulink仿真详解

文章目录前言一、SVPWM的控制原理二、空间矢量的概念三、电压与磁链空间矢量的关系四、三相逆变器的基本电压空间矢量五、SVPWM 算法的合成原理六、SVPWM 算法推导6.1.七段式SVPWM6.2.五段式SVPWM&#xff08;又称DPWM&#xff09;七、SVPWM 算法实现7.1.合成矢量Uref所处扇区的…

【手写 Promise 源码】第十篇 - Promise.prototype.catch 和 Promise.prototype.finally 的实现

theme: fancy 一&#xff0c;前言 上篇&#xff0c;主要实现了 Promise 的两个静态 API&#xff08;类方法&#xff09;&#xff1a;Promise.resolve 和 Promise.reject&#xff0c;主要涉及以下几个点&#xff1a; Promise.resolve 创建并返回一个成功的 promise&#xff1…

WebDAV之葫芦儿·派盘+纯纯写作

纯纯写作 支持WebDAV方式连接葫芦儿派盘。 推荐一款简单的纯文本编辑软件,纯粹、有安全感、随时、绝对不丢失内容、具备良好的写作体验。界面非常简洁,且功能齐全,旨在给用户们提供贴心、舒适的写作服务。纯纯写作可以实现在Windows桌面PC, Android设备上同步的移动办公软件…

梦熊杯-十二月月赛-钻石组-B.卷王

B. Problem B.卷王(study.cpp) 内存限制&#xff1a;256 MiB 时间限制&#xff1a;1000 ms 标准输入输出 题目类型&#xff1a;传统 评测方式&#xff1a;文本比较 题目描述&#xff1a; 在某个群里&#xff0c;有一个卷王&#xff0c;他很关心群友的学习成绩。 他扬言…

Web API请求查询字符串超长问题

调用Web API时返回“HTTP Error 404.15 - Not Found”的错误提示&#xff0c;如下截图&#xff1a; 经检查&#xff0c;传递的查询参数字符长度超过IIS默认最大查询字符串长度的设置&#xff0c;IIS服务器的 maxQueryString&#xff08;单位&#xff1a;字节&#xff09; 设置&…

一杯白酒搅动的资本江湖

王家卫的电影《东邪西毒》中有句经典台词&#xff1a;酒越喝越暖&#xff0c;水越喝越寒。江湖刀光剑影&#xff0c;唯有酒让武林人士在奔波途中心中一暖。然而&#xff0c;在白酒搅动的资本江湖中&#xff0c;酒企已经很久没有感受到上市的“暖意”了。自2016年金徽酒挂牌上交…

网络基础2--HTTP协议详解

目录 一、自定制协议 二、TCP粘包问题 2.1. 定长结构体和非定长结构体在发送时的区别 2.2. 那么为什么内存不连续的结构体不能直接使用send发送呢&#xff1f; 2.2. 那我们怎样去接收不定长的数据呢&#xff1f; 2.3. 我们怎样去接收不连续的内存呢&#xff1f; 2.4序列化和…

shiro权限框架介绍以及springboot整合shiro

What is Apache Shiro? Apache Shiro is a powerful and flexible open-source security framework that cleanly handles authentication, authorization, enterprise session management and cryptography. Apache Shiro’s first and foremost goal is to be easy to use…

LDO的dropout voltage

目录从一个设计错误谈起Dropout压降从芯片内部电路结构理解dropout压降MOS管 > 低dropout压降的LDO进一步降低dropout压降的方法在系统设计中&#xff0c;电源管理是不可或缺的&#xff0c;而LDO&#xff08;线性稳压器&#xff09;是电源管理器件中及其重要的一类器件。其应…