如何解决小程序图标点击热区小,落点不准问题?

原因:一般图标44px是最小可点击标准,但是图标有时候需要配合实现展示效果,会用14等小尺寸,落点稍偏就点不中。

修复:图标外层包一层padding:16px的view承接点击,热区扩大到30x30px;再用margin: -16px负边距抵消padding,图标视觉位置和大小完全不变,搜索框高度也不变。

效果如图

bash 复制代码
 <view v-if="keyword" class="-m-[16rpx] flex shrink-0 items-center p-[16rpx]" @touchstart="clearKeyword">
                    <image :src="icons.clear" class="h-[28rpx] w-[28rpx]" />
                </view>
相关推荐
szial2 小时前
JavaScript 的 call、apply 和 bind:如何控制函数调用
开发语言·前端·javascript
CopyCode2 小时前
Agent 开发不是模型训练:一个前端的入门认知
前端·llm·agent
吠品2 小时前
HTTPS 真身:HTTP 套了层 TLS
java·服务器·前端
JYeontu2 小时前
实现一个「曲线滑块验证」功能
前端·javascript·html
Csvn2 小时前
组件库(从 API 契约到 Headless 内核)
前端
deli0072 小时前
为什么最近邻路线总在绕远?2-opt 把 50 城 TSP 缩短了 20.9%
前端
guslegend2 小时前
底层数据设计:读写分离、分库分表与热点数据隔离
前端
Southern Wind2 小时前
AIAgent——第一章:本地 Agent 与 Vue 3 流式全栈实战
前端·javascript·vue.js
可乐鸡翅yeah_3 小时前
HLS 业务 Referer‑Policy 网页元标签引发播放异常排错
前端·javascript·网络·ffmpeg·php·音视频