uniapp 選項卡
發表時(shí)間：2024-4-11
發布人(rén)：融晨科技
浏覽次數：45
<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的(de)值來(lái)顯示不(bù)同的(de)内容 -->
<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, // 當前激活的(de)選項卡索引
};
},
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>
