investToday 项目,密码输入框遇到的bug

本文探讨了移动端UI设计中常见的问题及解决方案,包括点击事件延迟、光标隐藏、li标签间距、touch事件处理及组件监听优化,适用于iOS与安卓平台。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.在触发blur的时候,同时点击取消按钮,弹框不消失。原因是使用了click事件,移动端click()有300ms延迟,此时,弹框有下移动,所以click没有触发在取消btn上。

解决:改用touchstart

事件触发是touchstart touchmove touchend click ,touchmove和click是相冲突的,不会同时触发。

2.隐藏的光标,在ios下需要设置input为font-size:0,光标才会隐藏,在安卓下,如果font-size:0,圆点不会出现

3.li标签有默认的间距,需要给ul标签设置font-size:0去掉间距

4.使用touchmove.prevent阻止底层页面的滑动,也就是阻止touch的穿透

5.密码弹框的组件里面监听密码弹框组件的show为true还是false,当父组件使用v-if的时候,组件是条件渲染,条件块内的事件监听器和子组件适当地被销毁和重建,所以子组件内监听不到密码弹框的show。

当使用v-show的时候,组件块始终存在页面,不会销毁,所以可以监听到密码弹框的show.v-show有更高的初始渲染,v-if有更高的条件渲染开销。(来自官网,v-if vs v-show)

 

转载于:https://www.cnblogs.com/sisi2020/p/10981165.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值