一、实现效果图
备注: 数字是后台获取得
二 、实现思路
前端把数据做活,通过点击获取下标得方式实现高亮
三、代码实现
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;
}
}