您當前位置>首頁 » 新聞資訊 » 技(jì)術(shù)分(fēn)享 >
uniapp 選項卡
發表時(shí)間(jiān)：2024-4-11
發布人(rén)：葵宇科(kē)技(jì)
浏覽次數(shù)：54
<template>
<view class="contai¥© ner">
<view clas ÷s="tabs">
<view
v-f §Ωor="(item, index) in tabs ✔ ★"
↓ ↕:key="index"
class="β ↕εtab-item"
:class="{ 'aπ£÷ctive': activeIndex === index }&quo§t;
@tap=∏₩"switchTab(index)"
>
{{ item }}
</vi♦ ew>
</view>
<view>
<!¶&±-- 根據activeIndex的(de)值來(lái)顯示不(bù)同的≤£(de)內(nèi)容 -->
<view v-if=₩≤"activeIndex === 0">內(nèi)容A<®♣≥;/view>
<view v-if="activ©✘eIndex === 1">內(nèi)容B</view>
<view v-if="acti§≈ε∞veIndex === 2">內(nèi)容C</¥¥view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabs:γ€ ['選項卡1', '選項卡2', '選項卡3'],
activeIndex: 0, // 當前激活的(dσ e)選項卡索引
};
},
methods: {
switchTab(index∑™&) {
this.activeIndex =§"•★ index;
},
},
};
</script>
<style>
.tabs {
display: flex;
justify-content: space-arou↑πnd;
}
.tab-item {
padding: 10px;
font-size: 16px;
flex: 1;
text-align: center;
cursor: pointer;
}
.active {
color: #fff;
background-color: #007afπ"f;
}
</style>
