uniapp 选项卡
发表时间：2024-4-11
发布人：葵宇科技
浏览次数：41
<template>
<view class="container">
<view class="tabs">
<view
v-for="(item, index) in tabs"
:key="index"
class="tab-item"
:class="{ 'active': activeIndex === index }"
@tap="switchTab(index)"
>
{{ item }}
</view>
</view>
<view>
<!-- 根据activeIndex的值来显示不同的内容 -->
<view v-if="activeIndex === 0">内容A</view>
<view v-if="activeIndex === 1">内容B</view>
<view v-if="activeIndex === 2">内容C</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: ['选项卡1', '选项卡2', '选项卡3'],
activeIndex: 0, // 当前激活的选项卡索引
};
},
methods: {
switchTab(index) {
this.activeIndex = index;
},
},
};
</script>
<style>
.tabs {
display: flex;
justify-content: space-around;
}
.tab-item {
padding: 10px;
font-size: 16px;
flex: 1;
text-align: center;
cursor: pointer;
}
.active {
color: #fff;
background-color: #007aff;
}
</style>
