当前位置：首页 > uni-app

uniapp实现选项卡功能

2026-01-13 19:48:33uni-app

实现选项卡功能的基本方法

在uniapp中实现选项卡功能通常需要使用uni-segmented-control组件或自定义样式结合swiper组件。以下是两种常见实现方式：

uniapp实现选项卡功能

使用uni-segmented-control组件

uniapp实现选项卡功能

<template>
  <view>
    <uni-segmented-control 
      :current="current" 
      :values="items" 
      @clickItem="onClickItem" 
      styleType="text"
    ></uni-segmented-control>
    <view class="content">
      {{ content }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3'],
      current: 0,
      content: '选项1的内容'
    }
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex
        this.content = this.items[e.currentIndex] + '的内容'
      }
    }
  }
}
</script>

使用swiper组件实现滑动选项卡

<template>
  <view>
    <view class="tab-bar">
      <view 
        v-for="(item, index) in tabs" 
        :key="index" 
        :class="['tab-item', activeIndex === index ? 'active' : '']"
        @click="changeTab(index)"
      >
        {{ item }}
      </view>
    </view>
    <swiper 
      :current="activeIndex" 
      @change="swiperChange" 
      :duration="300"
    >
      <swiper-item v-for="(item, index) in tabs" :key="index">
        <view class="swiper-item">
          {{ item }}的内容区域
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['首页', '分类', '我的'],
      activeIndex: 0
    }
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index
    },
    swiperChange(e) {
      this.activeIndex = e.detail.current
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
}
.tab-item {
  flex: 1;
  text-align: center;
}
.active {
  color: #007AFF;
  border-bottom: 4rpx solid #007AFF;
}
.swiper-item {
  height: 300px;
  text-align: center;
}
</style>

优化选项卡交互体验

对于更复杂的选项卡需求，可以结合scroll-view实现横向滚动选项卡：

<template>
  <view>
    <scroll-view scroll-x class="nav-scroll">
      <view 
        v-for="(item, index) in navList" 
        :key="index" 
        :class="['nav-item', currentNav === index ? 'active' : '']"
        @click="switchNav(index)"
      >
        {{ item }}
      </view>
    </scroll-view>
    <swiper :current="currentNav" @change="swiperChange">
      <!-- swiper内容 -->
    </swiper>
  </view>
</template>

<style>
.nav-scroll {
  white-space: nowrap;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
}
.nav-item {
  display: inline-block;
  padding: 0 30rpx;
}
.active {
  color: #007AFF;
  position: relative;
}
.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30rpx;
  right: 30rpx;
  height: 4rpx;
  background-color: #007AFF;
}
</style>