收藏
回答

bindtap如何扩展点击区域?

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 需求 客户端 6.5.3 2.4.0

- bindtap如何扩展点击区域?


由于触摸点击事件不像电脑上一样精准,屏幕上显示的icon又比较小,不容易点到

于是给icon设置了margin和padding,却发现点到icon的margin和padding部分并不会触发bingtap事件

按照网上的设置透明border,也不行。不确定是不是我使用姿势有问题。


因此想请教大家,bindtap如何扩展点击区域?

最后一次编辑于  2019-06-15
回答关注问题邀请回答
收藏

3 个回答

  • 拾迹
    拾迹
    2019-06-15

    利用伪元素,参考代码:

    .view{
      position: relative;
     
      &::after{
        position: absolute;
        display: block;
        width: 200%;
        height: 200%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
      }
    }


    2019-06-15
    有用 2
    回复
  • Yunior
    Yunior
    2019-10-28

    这里可以完美解决,希望能帮到你 ——> 巧用伪元素(:after/before)放大手机端点击区域

    2019-10-28
    有用 1
    回复
  • 龙
    2019-06-15

    icon外面套个view,给view添加padding或者设置宽高,然后bindtap绑在view上

    2019-06-15
    有用
    回复 7
    • Cookie🍪
      Cookie🍪
      2019-06-15

      不好意思没讲明白,确实是image标签外面套了个view标签,但设置view的padding没起作用

      2019-06-15
      回复
    • 龙
      2019-06-15回复Cookie🍪

      有代码吗?发出来看一下

      2019-06-15
      回复
    • Cookie🍪
      Cookie🍪
      2019-06-15回复
      <view class="flex-wrp upType" style="flex-direction:row;">
                    <block wx:for="{{typeArray1}}" wx:key="id">
                      <view class="flex-item" bindtap="switchType" id="img{{item.id}}">
                        <block wx:if="{{nowType == item.id}}">
                          <image class="typeIcon" mode="scaleToFill" src="../../image/{{item.imgName}}_HL.png" data-id="{{item.id}}" >image>
                          <view class="typeTitle" data-id="{{item.id}}" style="color:#1aad19">{{item.title}}view>
                        block>
       
                        <block wx:elif="true">
                          <image class="typeIcon" mode="scaleToFill" src="../../image/{{item.imgName}}.png" data-id="{{item.id}}" bindtap="switchType" id="img{{item.id}}">image>
                          <view class="typeTitle" data-id="{{item.id}}" bindtap="switchType" id="title{{item.id}}">{{item.title}}view>
                        block>
                      view>
                    block>
                  view>


      2019-06-15
      回复
    • Cookie🍪
      Cookie🍪
      2019-06-15回复

      bindtap 到 class="flex-item"

      2019-06-15
      回复
    • 龙
      2019-06-15回复Cookie🍪

      老哥,把样式和js也发出来呀

      2019-06-15
      回复
    查看更多(2)
登录 后发表内容