当前位置：首页 > uni-app

uniapp实现选项卡功能

2026-02-05 17:58:41uni-app

uniapp实现选项卡功能的方法

在uniapp中实现选项卡功能可以通过多种方式，以下是几种常见的实现方法：

使用uniapp原生组件实现

uniapp提供了uni-segmented-control和swiper组件结合实现选项卡功能：

<template>
  <view>
    <uni-segmented-control 
      :current="current" 
      :values="items" 
      @clickItem="onClickItem">
    </uni-segmented-control>

    <swiper 
      :current="current" 
      @change="onSwiperChange"
      :style="{height: swiperHeight + 'px'}">
      <swiper-item v-for="(item, index) in items" :key="index">
        <view>{{item}}内容区</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3'],
      current: 0,
      swiperHeight: 0
    }
  },
  methods: {
    onClickItem(e) {
      this.current = e.currentIndex
    },
    onSwiperChange(e) {
      this.current = e.detail.current
    }
  },
  onReady() {
    // 动态设置swiper高度
    uni.createSelectorQuery().select('.swiper-item').boundingClientRect(res => {
      this.swiperHeight = res.height
    }).exec()
  }
}
</script>

使用自定义组件实现

可以创建自定义选项卡组件，提供更灵活的样式和功能：

<template>
  <view class="tab-container">
    <view class="tab-header">
      <view 
        v-for="(item, index) in tabs" 
        :key="index"
        :class="['tab-item', activeIndex === index ? 'active' : '']"
        @click="switchTab(index)">
        {{item.title}}
      </view>
    </view>

    <view class="tab-content">
      <slot name="content" :activeIndex="activeIndex"></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    defaultActive: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeIndex: this.defaultActive
    }
  },
  methods: {
    switchTab(index) {
      this.activeIndex = index
      this.$emit('change', index)
    }
  }
}
</script>

<style>
.tab-container {
  display: flex;
  flex-direction: column;
}
.tab-header {
  display: flex;
  border-bottom: 1px solid #eee;
}
.tab-item {
  padding: 15px 20px;
  text-align: center;
}
.tab-item.active {
  color: #007AFF;
  border-bottom: 2px solid #007AFF;
}
.tab-content {
  padding: 15px;
}
</style>

使用第三方UI库实现

uniapp生态中有多个UI库提供了选项卡组件，如uView、uni-ui等：

使用uView的u-tabs组件：


<template>
<view>
 <u-tabs 
   :list="list" 
   :is-scroll="false" 
   :current="current" 
   @change="change">
 </u-tabs>

 <view v-if="current === 0">
   内容1
 </view>
 <view v-if="current === 1">
   内容2
 </view>
</view>
</template>

export default { data() { return { list: [{ name: '选项1' }, { name: '选项2' }], current: 0 } }, methods: { change(index) { this.current = index; } } } ```