uniapp中tabs标签代码
时间: 2023-09-27 10:10:27 浏览: 44
<template>
<view class="container">
<view class="tab-bar">
<view class="tab-item" :class="{active: activeIndex === 0}" @click="switchTab(0)">首页</view>
<view class="tab-item" :class="{active: activeIndex === 1}" @click="switchTab(1)">分类</view>
<view class="tab-item" :class="{active: activeIndex === 2}" @click="switchTab(2)">购物车</view>
<view class="tab-item" :class="{active: activeIndex === 3}" @click="switchTab(3)">我的</view>
</view>
<view>
<!-- 根据不同的 activeIndex 显示不同的页面 -->
<view v-if="activeIndex === 0">首页内容</view>
<view v-if="activeIndex === 1">分类内容</view>
<view v-if="activeIndex === 2">购物车内容</view>
<view v-if="activeIndex === 3">我的内容</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
activeIndex: 0 // 当前选中的标签页
}
},
methods: {
switchTab(index) {
this.activeIndex = index
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
}
.tab-bar {
display: flex;
justify-content: space-around;
height: 50px;
background-color: #fff;
border-top: 1px solid #ccc;
}
.tab-item {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-size: 16px;
color: #666;
}
.tab-item.active {
color: #f00;
}
</style>