写一个uniapp tab页

<template>
<view class="tab">
<view class="tab-item" :class="{active:index===currentTab}" v-for="(item,index) in tabList" :key="item.id" @click="changeTab(index)">
{{item.title}}
</view>
</view>
</template>

<script>
export default {
data() {
return {
currentTab: 0,
tabList: [
{ id: 1, title: "首页" },
{ id: 2, title: "分类" },
{ id: 3, title: "购物车" },
{ id: 4, title: "我的" },
],
};
},
methods: {
changeTab(index) {
this.currentTab = index;
},
},
};
</script>

<style>
.tab {
display: flex;
justify-content: space-between;
background-color: #fff;
font-size: 16px;
height: 50px;
border-bottom: 1px solid #ebebeb;
}
.tab-item {
flex: 1;
text-align: center;
line-height: 50px;
color: #999;
}
.tab-item.active {
color: #007aff;
}
</style>