原因:一般图标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>