tab 切换，动态加载数据``` vue {{grid.listName}} ``` ```js ``` ```css

<!-- 顶部导航 -->
<view class="topTabBar">
    <view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex"@tap="showType(tbIndex,grid)">
        <view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid.listName}}</view>
    </view>
</view>

<script>
	
	import {fetchCompany,fetchCompanyReport} from '@/api/tabBar/user/companyEnterprise.js'
	export default {
		data() {
			return {
				orderType: [
					{listState:'2',listName:'已使用'},
					{listState:'3',listName:'未使用'},
				],
				tabbarIndex:0, //当前下标志
				companyReportInfo:{} //所有报表信息
			};
		},
		onLoad(options) {
			fetchCompanyReport(options.companyId).then(res=>{
				this.companyReportInfo = res
			})
		},
		methods:{
			//切换tab的时候
			showType(tbIndex,grid){
				// console.log(grid.listState);
				this.tabbarIndex = tbIndex;
				this.listState = grid.listState
				// this.getPeopleList(this.listState)
				this.list = this.couponList[tbIndex];
			},
		}
	}
</script>

.topTabBar{
		width: 100%;
		// position: fixed;
		top: 0;
		// z-index: 10;
		background-color: #f8f8f8;
		height: 80upx;
		display: flex;
		justify-content: space-around;
		.grid{
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #444;
			font-size: 28upx;
			.text{
				height: 76upx;
				display: flex;
				align-items: center;
				font-weight: bold;
				&.on{
					color: #FC1741;
					border-bottom: solid 4upx #FC1741;
				}
			}
			
		}
	}