weui-miniprogram
weui-miniprogram copied to clipboard
mp-navigation-bar左侧按钮点击区域太小了,怎么调整?
左侧<点击区域只有12px*24px,很不容易点击到的,请问该怎么解决
<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 😂
可以使用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;
}
感觉这个项目的整体点击区域都设计的小了一点...关闭操作按钮尤其明显。
具体实现修改点击区域,ext-class属性会使用的比较多