uview 中的u-sticky u-tabs 修改成员间隔

最新推荐文章于 2025-03-01 11:48:27 发布

夜跑者

最新推荐文章于 2025-03-01 11:48:27 发布

阅读量2.8k

点赞数 5

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/liubangbo/article/details/126869591

版权

CSS 专栏收录该内容

46 篇文章

订阅专栏

在使用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;
  }
}

修改后的效果如下：