ui-li点击背景色-以及改变文字颜色，下面的是左右拖动--以及顶部固定

最新推荐文章于 2023-01-03 20:36:48 发布

csstmg

最新推荐文章于 2023-01-03 20:36:48 发布

阅读量579

点赞数

分类专栏： element 前端

本文链接：https://blog.csdn.net/csstmg/article/details/119393497

版权

前端同时被 2 个专栏收录

171 篇文章 1 订阅

订阅专栏

element

104 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<div class="myHead">
      <ul class="navbar" :class="'active' +active">
        <li @click="navChange(1)">企业话术</li>
        <li @click="navChange(2)">团队话术</li>
        <li @click="navChange(3)">个人话术</li>
      </ul>
方法
 navChange (type) {
      this.active = type
    },
样式

  .myHead{
    background-color: #fff;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1000;
    padding: .2rem .34rem
  }
  .navbar{
    margin-top:.2rem;
    height: 0.8rem;
    background-color: #fff;
    box-shadow: 0px 2px 4px 0px rgba(181, 188, 197, 0.2);
    border-radius: .38rem;
    li{
      width: 33.33%;
      text-align: center;
      float: left;
      line-height: 0.8rem;
      font-size: 0.3rem;
      font-weight: 500;
      color: #393939;
      border-radius: .38rem;
    }
    &.active1{
      li:nth-of-type(1){
        color: #FFFFFF;
        background-color: #4675C0;
      }
    }
    &.active2{
      li:nth-of-type(2){
        color: #FFFFFF;
        background-color: #4675C0;
      }
    }
    // nth-last-type
    &.active3{
      li:nth-of-type(3){
        color: #FFFFFF;
        background-color: #4675C0;
      }
    }
  }
 }

van-tab 可拖动样式修改

  <van-tabs class="mytabs">
        <van-tab v-for="(item,index) in 8" :title="'标签 ' + index" :key="index">
        </van-tab>
      </van-tabs>
样式
  /deep/.mytabs {
    .van-tabs__wrap.van-tabs__wrap--scrollable{
      height: .88rem !important;
    }
   .van-tabs__line{
      width: 0;
      height: 0;
    }
    .van-tab{
      min-width: 1.6rem;
      height: .6rem;
      line-height: .6rem;
      font-size: .28rem;
      font-weight: 500;
      color: #393939;
      border-radius: .38rem;
    }

    .van-tab.van-tab--active{
      background-color: #4675C0;
      color: #fff;
    }
  }