小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- bindtap如何扩展点击区域？
由于触摸点击事件不像电脑上一样精准，屏幕上显示的icon又比较小，不容易点到
于是给icon设置了margin和padding，却发现点到icon的margin和padding部分并不会触发bingtap事件
按照网上的设置透明border，也不行。不确定是不是我使用姿势有问题。
因此想请教大家，bindtap如何扩展点击区域？
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
利用伪元素，参考代码：
.view{
position
:
relative
;
&::after{
absolute
display
block
width
200%
height
top
50%
left
transform: translate(
-50%
,
)
}
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
这里可以完美解决，希望能帮到你 ——> 巧用伪元素(:after/before)放大手机端点击区域
icon外面套个view，给view添加padding或者设置宽高，然后bindtap绑在view上
不好意思没讲明白，确实是image标签外面套了个view标签，但设置view的padding没起作用
有代码吗？发出来看一下
<
view
class
=
"flex-wrp upType"
style
"flex-direction:row;"
>
wx:for
"{{typeArray1}}"
wx:key
"id"
"flex-item"
bindtap
"switchType"
id
"img{{item.id}}"
wx:if
"{{nowType == item.id}}"
image
"typeIcon"
mode
"scaleToFill"
src
"../../image/{{item.imgName}}_HL.png"
data-id
"{{item.id}}"
></
"typeTitle"
"color:#1aad19"
>{{item.title}}</
</
wx:elif
"true"
"../../image/{{item.imgName}}.png"
"title{{item.id}}"
bindtap 到 class="flex-item"
老哥，把样式和js也发出来呀
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
利用伪元素，参考代码：
.view{position:relative;&::after{position:absolute;display:block;width:200%;height:200%;top:50%;left:50%;transform: translate(-50%,-50%)}}这里可以完美解决，希望能帮到你 ——> 巧用伪元素(:after/before)放大手机端点击区域
icon外面套个view，给view添加padding或者设置宽高，然后bindtap绑在view上
不好意思没讲明白，确实是image标签外面套了个view标签，但设置view的padding没起作用
有代码吗？发出来看一下
<viewclass="flex-wrp upType"style="flex-direction:row;"><blockwx:for="{{typeArray1}}"wx:key="id"><viewclass="flex-item"bindtap="switchType"id="img{{item.id}}"><blockwx:if="{{nowType == item.id}}"><imageclass="typeIcon"mode="scaleToFill"src="../../image/{{item.imgName}}_HL.png"data-id="{{item.id}}"></image><viewclass="typeTitle"data-id="{{item.id}}"style="color:#1aad19">{{item.title}}</view></block><blockwx:elif="true"><imageclass="typeIcon"mode="scaleToFill"src="../../image/{{item.imgName}}.png"data-id="{{item.id}}"bindtap="switchType"id="img{{item.id}}"></image><viewclass="typeTitle"data-id="{{item.id}}"bindtap="switchType"id="title{{item.id}}">{{item.title}}</view></block></view></block></view>bindtap 到 class="flex-item"
老哥，把样式和js也发出来呀