Angular实现tab切换

一、实现效果图

备注: 数字是后台获取得

二 、实现思路

前端把数据做活，通过点击获取下标得方式实现高亮

三、代码实现

html

ts

四、代码案例

html

 <ul class="tabList">  
        <li *ngFor="let item of tabPendingArr index as i" [ngClass]="activeIndex == i ? 'active':''" (click)="tabGetList(i)">  
        {{item.name}}
        <span>({{item.count}})</span>
      </li> 
      </ul>

ts

 tabNumObj: any;
  activeIndex:Number = 0;
  tabPendingArr: Array<Object>;

 getCount() {
    //  this.homeService.getNewCustomerCount(this.userinfo.consultantId).subscribe(resp => {
    this.tabNumObj = { redistrCount: 7, newRecomCount: 8, phoneUndisCount: 5 }
    let redistr = this.tabNumObj.redistrCount//重分配客户数
    let newRecom = this.tabNumObj.newRecomCount//新推荐客户数
    let phoneUndis = this.tabNumObj.phoneUndisCount //留电待处理客户数

    this.tabPendingArr = [{ name: "重分配客户", type: 1, count: redistr }, { name: "新推荐客户", type: 2, count: newRecom }, { name: "留电待处理", type: 3, count: phoneUndis }]

    // this.loading.hide();
    // });


    this.getCommonDistribution()
  }
  tabGetList(i){
    this.activeIndex = i
  }

备注：

• angular实现循环数组带下标
  let item of tabPendingArr index as i

<li *ngFor="let item of tabPendingArr index as i" [ngClass]="activeIndex == i ? 'active':''" (click)="tabGetList(i)">  
        {{item.name}}
        <span>({{item.count}})</span>
      </li> 

• 动态class定义

 [ngClass]="{'pengdingCus':title=='待跟进客户'}">

scss

.tabList{
    display: flex;
    background: #fff;
    height: 40px;
    border-bottom:1px #666666 solid;
    // position: fixed;
    // z-index: 999;
    width: 100%;
    margin-bottom: 1px;
    li{
      width: 33%;
      font-size: 14px;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
    .active{
      color: #1782F0;
      border-bottom: 2px solid #1782F0;
    }
  }