在使用uview 中的u-sticky u-tabs组件时,可能需要修改成员之间的间隔。但是u-tabs并没有提供修改成员间隔属性,所以需要穿透样式实现。
修改之前代码及样式如下:
<view class="wrapper">
<u-sticky bgColor="#fff">
<u-tabs
:list="tabList"
lineWidth="50"
:activeStyle="{ color: '#2678FFFF' }"
></u-tabs>
</u-sticky>
</view>
共享工位 ,预定详情 ,固定工位 三者之间的间隔有点小,怎么变大呢?
.wrapper {
background: rgb(227, 236, 250);
padding-bottom: 100rpx;
min-height: 100vh;
::v-deep .u-sticky {
height: 100rpx;
display: flex;
justify-content: center;
}
::v-deep .u-tabs__wrapper__nav__item {
padding: 0 32rpx;
}
}
修改后的效果如下: