uniapp实现一个tab选项卡的功能

使用uni-app实现一个基本的选项卡组件

代码语言：javascript复制

<template>
  <view class="tab">
    <view class="tab-header">
      <!-- 选项卡头部 -->
      <view
        class="tab-item"
        :class="{ active: activeTab === 'tab1' }"
        @click="changeTab('tab1')"
      >
        Tab 1
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'tab2' }"
        @click="changeTab('tab2')"
      >
        Tab 2
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'tab3' }"
        @click="changeTab('tab3')"
      >
        Tab 3
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'tab4' }"
        @click="changeTab('tab4')"
      >
        Tab 4
      </view>
      <view
        class="tab-item"
        :class="{ active: activeTab === 'tab5' }"
        @click="changeTab('tab5')"
      >
        Tab 5
      </view>
    </view>
    <view class="tab-content">
      <!-- 选项卡内容 -->
      <view v-if="activeTab === 'tab1'">
        Tab 1 Content
      </view>
      <view v-if="activeTab === 'tab2'">
        Tab 2 Content
      </view>
      <view v-if="activeTab === 'tab3'">
        Tab 3 Content
      </view>
      <view v-if="activeTab === 'tab4'">
        Tab 4 Content
      </view>
      <view v-if="activeTab === 'tab5'">
        Tab 5 Content
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1', // 当前活动的选项卡
    };
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab;
    },
  },
};
</script>

<style>
.tab {
  width: 100%;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  color: #333;
  background-color: #f1f1f1;
  cursor: pointer;
}

.tab-item.active {
  background-color: #ccc;
}

.tab-content {
  padding: 20px;
  background-color: #f1f1f1;
}
</style>

background class click padding view

0 人点赞