weui-miniprogram icon indicating copy to clipboard operation
weui-miniprogram copied to clipboard

mp-navigation-bar左侧按钮点击区域太小了,怎么调整?

Open geemaple opened this issue 4 years ago • 3 comments

左侧<点击区域只有12px*24px,很不容易点击到的,请问该怎么解决

geemaple avatar May 06 '20 15:05 geemaple

<mp-navigation-bar ext-class="mpNavBar" title="内容" :back="false">
  <view slot="left" class="weui-navigation-bar__buttons" @tap="onNavBack">
    <view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
  </view>
</mp-navigation-bar>

直接覆盖 slot,然后设置 .weui-navigation-bar__buttons 宽度为 100rpx 😂

savokiss avatar Jul 01 '20 09:07 savokiss

可以使用ext-class属性,添加外部class修改:

<mp-navigation-bar ext-class="larger_buttons"/>
/* app.wxss */
.larger_buttons .weui-navigation-bar__btn_goback {
  width: 80rpx !important;
  mask-size: contain !important;
  mask-position: left !important;
    -webkit-mask-size: contain !important;
    -webkit-mask-position: left !important;
}

borie88 avatar Mar 31 '21 09:03 borie88

感觉这个项目的整体点击区域都设计的小了一点...关闭操作按钮尤其明显。

具体实现修改点击区域,ext-class属性会使用的比较多

xccjk avatar Dec 24 '21 02:12 xccjk