1. はじめに

モバイルアプリケーション開発において、タブ切り替えは一般的かつ重要な機能の 1 つです。クロスプラットフォーム開発フレームワークとして、Uniapp は複数のプラットフォームで同時に実行されるアプリケーションを開発できます。この記事では、Uniapp にタブ切り替え機能を実装する方法と参考用のサンプルコードを紹介します。

2. uni-swiper コンポーネントを利用する

Uniapp では、タブ切り替え機能を簡単に実装できる uni-swiper コンポーネントを提供しています。 uni-swiper コンポーネントは、スライド切り替え効果を設定できるカルーセルコンポーネントであり、タブ切り替えに非常に適しています。

2.1 タブページコンポーネントの作成

まず、特定のページコンテンツを実装するタブページコンポーネントを作成します。たとえば、それぞれのタブが異なるページコンテンツに対応する 3 つのタブを作成します。

<template>
  <view>
    <!-- 第一个标签页 -->
    <view v-if="currentTab === 0">
      <!-- 页面内容 -->
    </view>

    <!-- 第二个标签页 -->
    <view v-if="currentTab === 1">
      <!-- 页面内容 -->
    </view>

    <!-- 第三个标签页 -->
    <view v-if="currentTab === 2">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0  // 当前选中的标签页
    }
  }
}
</script>

<style>
/* 样式 */
</style>

上の例では、currentTab 変数を通じて現在選択されているタブを制御します。 currentTab の値に応じて、対応するタブのコンテンツが表示されます。

2.2 タブバーコンポーネントの作成

次に、タブを切り替えるためのタブバーコンポーネントを作成します。 uni-swiper コンポーネントを使用してタブバーを実装し、クリックイベントを各タブにバインドし、クリックされたときに currentTab の値を切り替えることができます。

<template>
  <view>
    <!-- 标签页切换 -->
    <uni-swiper :current="currentTab" @change="handleTabChange">
      <!-- 第一个标签 -->
      <uni-swiper-item>
        <view @click="currentTab = 0">标签页1</view>
      </uni-swiper-item>

      <!-- 第二个标签 -->
      <uni-swiper-item>
        <view @click="currentTab = 1">标签页2</view>
      </uni-swiper-item>

      <!-- 第三个标签 -->
      <uni-swiper-item>
        <view @click="currentTab = 2">标签页3</view>
      </uni-swiper-item>
    </uni-swiper>

    <!-- 标签页内容 -->
    <view>
      <tab-content :current-tab="currentTab"></tab-content>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0  // 当前选中的标签页
    }
  },
  methods: {
    // 标签页切换事件
    handleTabChange(e) {
      this.currentTab = e.detail.current
    }
  },
  components: {
    'tab-content': TabContent
  }
}
</script>

<style>
/* 样式 */
</style>

上記の例では、uni-swiper コンポーネントを使用して 3 つの uni-swiper-item をラップし、それぞれの uni-swiper-item はラベルを表します。ラベルをクリックして currentTab の値を切り替え、タブページを切り替えます。

同時に、タブページコンポーネントをタブバーコンポーネントにネストし、current-tab 属性を通じて currentTab の値を渡して、現在のタブを表示します。選択したタブページの内容。

これでタブ切り替え機能の実装が完了しました。実際のニーズに応じてスタイルとタブのコンテンツをカスタマイズできます。