给你的点击区域加个触控热区
发布于 4 年前 作者 jingxiao 5095 次浏览 来自 分享

一、背景

给图标(按钮、标签)做事件点击时,常常会因为元素面积太小导致用户很难点中,影响用户体验,产品大佬就会让我们做大点击区域,一般给元素加个padding:6rpx就可以了,但这时UI就会偏差。

二、无入侵扩大热区的方法

给需要增加热区的元素加上add\_touch类,即可在原来的基础上,增加1.5倍触控热区。
.add_touch {
  position: relative;
}

.add_touch::after {
  content'';
  width100%;
  height100%;
  position: absolute;
  left0;
  top0;
  transformscale(1.5);
}

三、效果

四、代码片段

https://developers.weixin.qq.com/s/ROoPyNme7dfK

回到顶部