tab切换样式

qq_Girl200

于 2023-10-30 14:59:33 发布

阅读量150

点赞数

分类专栏： vue项目开发文章标签：前端 scss html vue.js uni-app

本文链接：https://blog.csdn.net/qq_42103673/article/details/134119470

版权

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

31 篇文章 1 订阅

订阅专栏

一、样式一

 <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;
      }
    }
  }