快乐的小面包
2021-03-25 11:37
采纳率: 100%
浏览 946

关于vant weapp 框架中tabs样式的修改问题

最近在使用vant weapp 搭小程序开发的页面。其中有个标签怎么的搞不好,颜色边框啥的都能改,带还是有几个不知道在哪改效果如下

问题一:怎么能把标签1234分开来变成独立的一块块的样式

问题二:怎么在标签1、标签2的前面加一个小图标

  • 收藏

3条回答 默认 最新

  • CSDN专家-九宝老师 2021-03-25 15:52
    已采纳

    1.需要看程序,正常的需要调一下css就OK

    2.需要看程序,一般的,加图片就可以

    打赏 评论
  • 快乐的小面包 2021-03-25 17:16

    @import '../common/index.wxss';

     

    .van-tabs {

      position: relative;

      -webkit-tap-highlight-color: transparent

    }

     

    .van-tabs__wrap {

      display: -webkit-flex;

      display: flex;

      overflow: hidden

    }

     

    .van-tabs__wrap--scrollable .van-tab {

      -webkit-flex: 0 0 22%;

      flex: 0 0 22%

    }

     

    .van-tabs__wrap--scrollable .van-tab--complete {

      -webkit-flex: 1 0 auto !important;

      flex: 1 0 auto !important;

      padding: 0 12px

    }

     

    .van-tabs__wrap--scrollable .van-tabs__nav--complete {

      padding-right: 8px;

      padding-left: 8px

    }

     

    .van-tabs__scroll {

      background-color: #fff;

      background-color: var(--tabs-nav-background-color, #fff)

    }

     

    .van-tabs__scroll--line {

      box-sizing: initial;

      height: calc(100% + 15px)

    }

     

    .van-tabs__scroll--card {

      margin: 0 16px;

      margin: 0 var(--padding-md, 16px)

    }

     

    .van-tabs__scroll::-webkit-scrollbar {

      display: none

    }

     

    .van-tabs__nav {

      position: relative;

      display: -webkit-flex;

      display: flex;

      -webkit-user-select: none;

      user-select: none

    }

     

    .van-tabs__nav--card {

      box-sizing: border-box;

      height: 30px;

      height: var(--tabs-card-height, 30px);

      border: 1px solid #ee0a24;

      border: var(--border-width-base, 1px) solid var(--tabs-default-color, #ee0a24);

      border-radius: 2px;

      border-radius: var(--border-radius-sm, 2px)

    }

     

    .van-tabs__nav--card .van-tab {

      color: #ee0a24;

      color: var(--tabs-default-color, #ee0a24);

      line-height: 28px;

      line-height: calc(var(--tabs-card-height, 30px) - var(--border-width-base, 1px)*2);

      border-right: 1px solid #ee0a24;

      border-right: var(--border-width-base, 1px) solid var(--tabs-default-color, #ee0a24)

    }

     

    .van-tabs__nav--card .van-tab:last-child {

      border-right: none

    }

     

    .van-tabs__nav--card .van-tab.van-tab--active {

      color: #fff;

      color: var(--white, #fff);

      background-color: #ee0a24;

      background-color: var(--tabs-default-color, #ee0a24)

    }

     

    .van-tabs__nav--card .van-tab--disabled {

      color: #c8c9cc;

      color: var(--tab-disabled-text-color, #c8c9cc)

    }

     

    .van-tabs__line {

      position: absolute;

      bottom: 0;

      left: 0;

      z-index: 1;

      height: 3px;

      height: var(--tabs-bottom-bar-height, 3px);

      border-radius: 3px;

      border-radius: var(--tabs-bottom-bar-height, 3px);

      background-color: #ee0a24;

      background-color: var(--tabs-bottom-bar-color, #ee0a24)

    }

     

    .van-tabs__track {

      position: relative;

      width: 100%;

      height: 100%

    }

     

    .van-tabs__track--animated {

      display: -webkit-flex;

      display: flex;

      transition-property: left

    }

     

    .van-tabs__content {

      overflow: hidden

    }

     

    .van-tabs--line .van-tabs__wrap {

      height: 44px;

      height: var(--tabs-line-height, 44px)

    }

     

    .van-tabs--card .van-tabs__wrap {

      height: 30px;

      height: var(--tabs-card-height, 30px)

    }

     

    .van-tab {

      position: relative;

      -webkit-flex: 1;

      flex: 1;

      box-sizing: border-box;

      min-width: 0;

      padding: 0 5px;

      text-align: center;

      cursor: pointer;

      color: #646566;

      color: var(--tab-text-color, #646566);

      font-size: 14px;

      font-size: var(--tab-font-size, 14px);

      line-height: 44px;

      line-height: var(--tabs-line-height, 44px)

    }

     

    .van-tab--active {

      font-weight: 500;

      font-weight: var(--font-weight-bold, 500);

      color: #323233;

      color: var(--tab-active-text-color, #323233);

      background-color: #ffac00;

    }

     

    .van-tab--disabled {

      color: #c8c9cc;

      color: var(--tab-disabled-text-color, #c8c9cc)

    }

     

    .van-tab__title__info {

      position: relative !important;

      top: -1px !important;

      display: inline-block;

      -webkit-transform: translateX(0) !important;

      transform: translateX(0) !important

    }

    这是组件库的css样式

     

    打赏 评论
  • 快乐的小面包 2021-03-25 17:17

    <van-tabs active="{{active}}" bind:change="onChange2" line-height="0" line-width="0">
    页面上写的代码

    打赏 评论

相关推荐 更多相似问题