taro 小程序 & touch event 转换 bug
taro 小程序 & touch event 转换 bug
before
after
事件处理
https://nervjs.github.io/taro/docs/event.html#docsNav
阻止事件冒泡
在 Taro 中另一个不同是你不能使用 catchEvent 的方式阻止事件冒泡。
你必须明确的使用 stopPropagation。
例如,阻止事件冒泡你可以这样写:
class Toggle extends Component {
constructor (props) {
super(props)
this.state = {isToggleOn: true}
}
onClick = (e) => {
e.stopPropagation()
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}))
}
render () {
return (
<button onClick={this.onClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
)
}
}
除了 bind 之外,事件参数也可以使用匿名函数进行传参。
直接写匿名函数不会打乱原有监听函数的参数顺序:
class Popper extends Component {
constructor () {
super(...arguments)
this.state = { name: 'Hello world!' }
}
render () {
const name = 'test'
return (
<Button onClick={(e) => {
e.stopPropagation()
this.setState({
name
})
}}>
{this.state.name}
</Button>
)
}
}
注意: 使用通过 usingComponents 的第三方组件不支持匿名函数
事件系统
事件分类
事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#事件详解
绑定并阻止事件冒泡
除 bind 外,也可以用 catch 来绑定事件。与 bind 不同, catch 会阻止事件向上冒泡。
事件对象
事件类型
事件分为冒泡事件和非冒泡事件:
冒泡事件:以关键字 on 为前缀,当组件上的事件被触发,该事件会向父节点传递。
非冒泡事件:以关键字 catch 为前缀,当组件上的事件被触发,该事件不会向父节点传递。
https://opendocs.alipay.com/mini/framework/events
https://opendocs.alipay.com/mini/framework/event-object
taro 小程序 & touch event 转换 bug的更多相关文章
- taro小程序展示富文本
在微信小程序下会用到wxParse这个东西来达到html转换wxml的效果, taro小程序官方也给出了示例,地址 这里封装成自己的组件: import Taro, { Component } fro ...
- 微信小程序的两个BUG?
微信小程序的两个BUG,也许可能是我搞错了 1.wx.uploadFile 用循环上传图片的时候,电脑.苹果手机上都会正常,安卓机上面则会出现the same task is working的问题 2 ...
- [RN] React Native代码转换成微信小程序代码的转换引擎工具
React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita
- [BUG]微信小程序ios时间转换
描述 小程序ios new Date('2019-08-14T08:00:00.000+0000') 显示为 <Date: null>. '2019-08-14T08:00:00 ...
- 微信小程序开发之常见BUG
1.wx:if 当前版本为1.3.0,正常使用 <view wx:if="{{length > 5}}"> 1 </view> <view wx ...
- 微信小程序——时间戳的转换及调用
开发微信小程序网盘功能模块的时候,需要获取到网盘文件夹创建的时间.如下图: 但是请求返回的数据是一段时间戳,如下图: 所以我们只能通过js把时间戳转换成时间格式. 在小程序官网的Demo的utils. ...
- Taro 小程序 自定义导航栏
在小程序中,有的页面需求可能需要我们做一个自定义的导航栏, 今天就来踩一踩坑 首先需要在app.js 中给全局的导航栏隐藏, // app.js window: { navigationStyle: ...
- 微信小程序js-时间转换函数使用
最近在做云开发博客小程序 采集微信发布的信息放入数据库会有createTime因此发现了不一样的地方 云函数可以直接使用 但是放到引导全局的app.js文件却是找不到该方法-->dateform ...
- 微信小程序开发-rem转换rpx小工具
实现原理: 对样式进行格式化,然后根据 “rem” 进行拆分,这样就会拆分成一个数组 [str1,str2,str3...,str6], 除了最后一个元素,前边的元素都会以 “rem” 样式的数值结尾 ...
随机推荐
- 从tcp层面研究java socket 的使用
本文主要通过wireshark抓包来分析java socket程序的一些细节, 解决以前的一些疑问: 1.当一方的socket先关闭后,另一方尚未关闭的socket 还能做什么? 2.当基于socke ...
- Kepware软件基本操作及使用Java Utgard实现OPC通信
一.环境搭建(基于win10 64位专业版) 1.Kepware 的下载.安装及使用 https://www.cnblogs.com/ioufev/p/9366877.html 2.重要:OPC 和 ...
- CSS(简介or选择器)
我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当H ...
- CVE-2020-1472 域内提权
攻击者通过NetLogon(MS-NRPC),建立与域控间易受攻击的安全通道时,可利用此漏洞获取域管访问权限.成功利用此漏洞的攻击者可以在该网络中的设备上运行经特殊设计的应用程序. 影响版本 Wind ...
- 免费开源的代码审计工具 Gosec 入门使用
声明: 本教程是在自己的电脑上本地测试Gosec的效果,所以不涉及其他运行模式,如果想要了解其他模式可以关注后期文档,如果想要自定义交流自定义代码扫描规则,可以跟我交流沟通. 背景: Gosec是一个 ...
- Java之jdk环境变量配置
1.jdk下载(按平时下载,注意一下路径就行)2.配置环境变量 :JAVA_HOME.Path.ClassPath3.检查是否成功:(查一下版本,可省略).运行环境(java.javac) 2:电脑- ...
- spark sql优化
1.内存优化 1.1.RDD RDD默认cache仅使用内存 可以看到使用默认cache时,四个分区只在内存中缓存了3个分区,4.4G的数据 使用kryo序列化+MEMORY_ONLY_SER 可以看 ...
- PTA甲级—STL使用
1051 Pop Sequence (25分) [stack] 简答的栈模拟题,只要把过程想清楚就能做出来. 扫描到某个元素时候,假如比栈顶元素还大,说明包括其本身的在内的数字都应该入栈.将栈顶元素和 ...
- L3-002 特殊堆栈 (30分) vector容器的模拟、vector容器的一些用法
vector容器的简单应用,我们可以用vector维护一个有序数组,每次对要插入的数用upper_bound或者lower_bound来 为这个数找一个应该插入到vector的位置.另外再找一个数组来 ...
- Codeforces Round #529 (Div. 3) F. Make It Connected (贪心,最小生成树)
题意:给你\(n\)个点,每个点都有权值,现在要在这\(n\)个点中连一颗最小树,每两个点连一条边的边权为两个点的点权,现在还另外给了你几条边和边权,求最小权重. 题解:对于刚开始所给的\(n\)个点 ...