当前位置：首页 > uni-app

uniapp制作标签页

2026-02-06 11:32:43uni-app

使用uniapp制作标签页的方法

方法一：使用uni-app官方组件uni-tabs

uni-app提供了uni-tabs组件用于快速创建标签页，支持横向和纵向布局，具有滑动切换效果。

uniapp制作标签页

<template>
  <view>
    <uni-tabs :current="current" @change="changeTab">
      <uni-tab title="标签1"></uni-tab>
      <uni-tab title="标签2"></uni-tab>
      <uni-tab title="标签3"></uni-tab>
    </uni-tabs>

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

<script>
export default {
  data() {
    return {
      current: 0
    }
  },
  methods: {
    changeTab(e) {
      this.current = e.index
    }
  }
}
</script>

方法二：自定义实现标签页

通过view和样式自定义标签页，灵活性更高。

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

    <view class="tab-content">
      <view v-show="current === 0">内容1</view>
      <view v-show="current === 1">内容2</view>
      <view v-show="current === 2">内容3</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabs: [
        {title: '标签1'},
        {title: '标签2'},
        {title: '标签3'}
      ]
    }
  },
  methods: {
    switchTab(index) {
      this.current = index
    }
  }
}
</script>

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

方法三：使用第三方组件库

如uView UI等第三方组件库提供了更丰富的标签页组件。

<template>
  <u-tabs
    :list="list"
    :current="current"
    @change="change"
  ></u-tabs>

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

<script>
export default {
  data() {
    return {
      current: 0,
      list: [
        {name: '标签1'},
        {name: '标签2'},
        {name: '标签3'}
      ]
    }
  },
  methods: {
    change(index) {
      this.current = index;
    }
  }
}
</script>