欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

uniapp 選項卡 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 技術(shù)分享 >

uniapp 選項卡

發(fā)表時間：2024-4-11

發(fā)布人：葵宇科技

瀏覽次數(shù)：45

 

在uniapp中，創(chuàng)建選項卡可以使用<view>標(biāo)簽結(jié)合條件渲染來實現(xiàn)。以下是一個簡單的例子：
<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>
      <!-- 根據(jù)activeIndex的值來顯示不同的內(nèi)容 -->
      <view v-if="activeIndex === 0">內(nèi)容A</view>
      <view v-if="activeIndex === 1">內(nèi)容B</view>
      <view v-if="activeIndex === 2">內(nèi)容C</view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      tabs: ['選項卡1', '選項卡2', '選項卡3'],
      activeIndex: 0, // 當(dāng)前激活的選項卡索引
    };
  },
  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>

相關(guān)案例查看更多