tab切换样式

最新推荐文章于 2025-05-31 13:23:59 发布

原创最新推荐文章于 2025-05-31 13:23:59 发布 · 531 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #scss #html #vue.js #uni-app

vue项目开发专栏收录该内容

31 篇文章

订阅专栏

博客涉及前端相关内容，包含scss、html、vue.js、uni-app等技术，主要提及了样式一，但未展开更多详细信息。

一、样式一

 <view class="tabs">
        <view class="tab" :class="{active: active === index}" v-for="(item, index) in tabs" @click="active = index">{{item.label}}</view>
      </view>

data(){
    return {
    active: 0,
    tabs: [
      {label: '我的工作'},
      {label: '我发布的'},
    ],
  }
}

  .tabs {
    display: flex; gap: 20px;
    .tab {
      background-color: $uni-bg-color; padding: 3px 10px; position: relative; transform: scale(1); transform-origin: left bottom; border-radius: 5px;
      transition: background-color .3s, color .3s, transform .3s;
      &:before, &:after {
        content: ""; position: absolute; display: block; background-color: #FFFFFF; width: 20px; height: 100%;  top: 0; z-index: -1; transition: background-color .3s;
      }
      &:before {
        left: 0; transform: skewX(20deg) translateX(-50%);
      }
      &:after {
        right: 0; transform: skewX(20deg) translateX(50%);
      }
      &.active {
        background-color: $uni-color-primary; color: $uni-text-color-inverse; transform: scale(1.11); z-index: 9;
        &:before, &:after {
          background-color: $uni-color-primary;
        }
        &:before {
          border-top-left-radius: 5px; border-bottom-left-radius: 5px;
        }
        &:after {
          border-top-right-radius: 5px; border-bottom-right-radius: 5px;
        }

      }
      &:first-child:before, &:last-child:after {
        display: none;
      }
      &:first-child {
        padding-left: 20px;
      }
      &:last-child {
        padding-right: 20px;
      }
    }
  }