您當前位置>首頁 » 新聞資訊 » 技(jì)術(shù)分(fēn)享 >
uniapp 選項卡
發表時(shí)間(jiān)：2024-4-11
發布人(rén)：葵宇科(kē)技(jì)
浏覽次數(shù)：54
<template>
<view class="contain≤♦Ωφer">
<view class="tabs&≥∞σquot;>
<view
v-≠≥for="(item, index) in ta bs"
:key="index&quΩπ₹ot;
cla≥±ss="tab-item"
:cl↓ass="{ 'active': activeIn≠€dex === index }"
@tap= ≤≠"switchTab(index)"
>
{{ item }™<®₩}
</view>
</view>
<view>
<!-£- 根據activeIndex的(de)值來(lái)顯示不(b¶'ù)同的(de)內(nèi)容 -->
<vie ♥★βw v-if="activeIndex === 0">內(nèi)容A∑₩"</view>
<view v-iφε∑f="activeIndex === 1">↑σ₩內(nèi)容B</view>
<view v-if="a ctiveIndex === 2">內(nèi)容C</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: ['選項 $•☆卡1', '選項卡2', '選項卡3'],
activeIndex: 0, // ↓δα當前激活的(de)選項卡索引
};
},
methods: {
switchTab(index) {
this.activeIndeβ¶x = 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: #0∞×07aff;
}
</style>
