Uniapp 实现顶部标签页切换功能(详细步骤)

npm install uview-ui

import uView from 'uview-ui';
Vue.use(uView);

<template>
  <view>
    <u-tab-bar :list="tabList" v-model="currentTab" @change="onTabChange">
      <!-- 页面内容区域 -->
      <swiper :current="currentTab" @change="onSwiperChange" indicator-dots="true" autoplay="false">
        <swiper-item>
          <view class="tab-content">Tab 1 Content</view>
        </swiper-item>
        <swiper-item>
          <view class="tab-content">Tab 2 Content</view>
        </swiper-item>
        <swiper-item>
          <view class="tab-content">Tab 3 Content</view>
        </swiper-item>
      </swiper>
    </u-tab-bar>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentTab: 0,  // 当前选中的标签索引
      tabList: [
        { text: 'Tab 1', icon: 'home' },  // 标签1
        { text: 'Tab 2', icon: 'search' },  // 标签2
        { text: 'Tab 3', icon: 'user' },  // 标签3
      ]
    };
  },
  methods: {
    // 标签切换事件
    onTabChange(index) {
      this.currentTab = index;
    },
    // swiper切换事件
    onSwiperChange(event) {
      this.currentTab = event.detail.current;
    }
  }
};
</script>
<style scoped>
.tab-content {
  padding: 20px;
  background-color: #f5f5f5;
}
</style>

<template>
  <view>
    <view class="tabs">
      <view class="tab" :class="{ active: currentTab === 0 }" @click="currentTab = 0">Tab 1</view>
      <view class="tab" :class="{ active: currentTab === 1 }" @click="currentTab = 1">Tab 2</view>
      <view class="tab" :class="{ active: currentTab === 2 }" @click="currentTab = 2">Tab 3</view>
    </view>
    <swiper :current="currentTab" @change="onSwiperChange">
      <swiper-item>
        <view>Tab 1 Content</view>
      </swiper-item>
      <swiper-item>
        <view>Tab 2 Content</view>
      </swiper-item>
      <swiper-item>
        <view>Tab 3 Content</view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentTab: 0,
    };
  },
  methods: {
    onSwiperChange(event) {
      this.currentTab = event.detail.current;
    }
  }
};
</script>
<style scoped>
.tabs {
  display: flex;
  justify-content: space-around;
  background-color: #f0f0f0;
  padding: 10px 0;
}
.tab {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.tab.active {
  font-weight: bold;
  color: #007aff;
}
swiper {
  margin-top: 10px;
}
</style>