uniapp制作标签页

使用uniapp制作标签页的方法

在uniapp中制作标签页可以通过多种方式实现，以下是几种常见的方法：

使用uniapp内置组件

uniapp提供了uni-tab-bar和uni-tab-item组件，可以快速创建标签页：

<template>
  <view>
    <uni-tab-bar :current="current" @change="changeTab">
      <uni-tab-item title="首页" icon="home"></uni-tab-item>
      <uni-tab-item title="分类" icon="list"></uni-tab-item>
      <uni-tab-item title="购物车" icon="cart"></uni-tab-item>
      <uni-tab-item title="我的" icon="person"></uni-tab-item>
    </uni-tab-bar>

    <view v-if="current === 0">首页内容</view>
    <view v-if="current === 1">分类内容</view>
    <view v-if="current === 2">购物车内容</view>
    <view v-if="current === 3">我的内容</view>
  </view>
</template>

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

自定义标签页样式

如果需要更灵活的样式控制，可以完全自定义标签页：

<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-if="current === 0">首页内容</view>
      <view v-if="current === 1">分类内容</view>
      <view v-if="current === 2">购物车内容</view>
      <view v-if="current === 3">我的内容</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabs: [
        {title: '首页'},
        {title: '分类'},
        {title: '购物车'},
        {title: '我的'}
      ]
    }
  },
  methods: {
    switchTab(index) {
      this.current = index
    }
  }
}
</script>

<style>
.tab-bar {
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f8f8f8;
}
.tab-item {
  flex: 1;
  text-align: center;
}
.active {
  color: #007aff;
  border-bottom: 4rpx solid #007aff;
}
.tab-content {
  padding: 20rpx;
}
</style>

使用第三方组件库

uniapp生态中有许多优秀的第三方组件库，如uView、ColorUI等，提供了更丰富的标签页组件：

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

    <view v-if="current === 0">首页内容</view>
    <view v-if="current === 1">分类内容</view>
    <view v-if="current === 2">购物车内容</view>
    <view v-if="current === 3">我的内容</view>
  </view>
</template>

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

实现滑动切换效果

结合swiper组件可以实现滑动切换标签页的效果：

<template>
  <view>
    <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>

    <swiper 
      :current="current" 
      @change="swiperChange"
      :duration="300"
    >
      <swiper-item>
        <view>首页内容</view>
      </swiper-item>
      <swiper-item>
        <view>分类内容</view>
      </swiper-item>
      <swiper-item>
        <view>购物车内容</view>
      </swiper-item>
      <swiper-item>
        <view>我的内容</view>
      </swiper-item>
    </swiper>
  </view>
</template>

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

以上方法可以根据项目需求选择使用，内置组件简单快捷，自定义方式灵活自由，第三方组件库功能丰富，swiper方式则能提供更好的用户体验。