uniapp 选项卡

### 实现 UniApp 中的选项卡

在 UniApp 中创建和使用选项卡组件可以通过 `u-tabs` 或者自定义方式来完成。对于希望快速集成并具有较好用户体验的应用开发者来说，使用已有的 UI 组件库是一个不错的选择。

#### 使用 uView 的 Tabs 组件

uView 是一个基于 Vue.js 和 UniApp 开发的企业级移动端组件库，提供了丰富的内置样式以及良好的交互体验。其中就包含了可以用来制作选项卡效果的 `u-tabs` 组件[^1]。

<template>
  <view class="content">
    <!-- tabs -->
    <u-tabs :list="tabList" @click="changeTab"></u-tabs>

    <!-- tab content -->
    <swiper :current="currentIndex" duration="300" @change="bindChange">
      <swiper-item v-for="(item, index) in tabContent" :key="index">
        <scroll-view scroll-y style="height: calc(100vh - 80rpx)">
          {{ item }}
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabList: [
        { name: '标签一' },
        { name: '标签二' },
        { name: '标签三' }
      ],
      tabContent: ['内容一', '内容二', '内容三']
    };
  },
  methods: {
    changeTab(index) {
      this.currentIndex = index;
    },
    bindChange(e) {
      const { current } = e.detail;
      this.currentIndex = current;
    }
  }
};
</script>

这段代码展示了如何利用 `u-tabs` 来构建简单的选项卡界面，并通过 Swiper 组件实现了页面之间的平滑过渡。当点击不同的 Tab 项时会触发相应的事件处理函数改变当前展示的内容页索引值，从而达到切换的效果。