UniAppのトップタブを実装して異なるデータを切り替える方法

モバイル アプリケーションの人気に伴い、ユーザーが異なるタブを簡単に切り替えて異なるデータを表示できるように、ほとんどのアプリケーションにはタブ機能が必要です。 UniApp フレームワークでは、上部のタブでさまざまなデータを切り替えることも非常に簡単です。この記事では、UniAppのトップタブで異なるデータを切り替える機能を実装する方法を詳しく紹介します。

1. 基本的なアイデア

UniApp の上部タブで異なるデータを切り替えるアイデアは非常にシンプルで、タブをクリックすることで異なるデータを切り替えることです。実装中に、2 つのコンポーネントを使用する必要があります:

• uni-tabs: UniApp に付属するタブ コンポーネント;
• uni -list- view: データを表示するために使用されるリストコンポーネント。

このうち、uni-tabs はタブの表示に使用され、ユーザーが別のタブをクリックすると、uni-list-view が表示されます。タブに基づく.が異なる場合は、対応するデータが表示されます。次に、これら 2 つのコンポーネントを使用して、上部タブで異なるデータを切り替える機能を実装する方法を順を追って説明します。

2. uni-tabs コンポーネントの作成

まず、タブを表示するための uni-tabs コンポーネントを作成します。具体的なコードは次のとおりです。

<template>
  <div>
    <uni-tabs @click="changeTab">
      <uni-tab :title="tabsData[0]"></uni-tab>
      <uni-tab :title="tabsData[1]"></uni-tab>
      <uni-tab :title="tabsData[2]"></uni-tab>
    </uni-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabsData: ['选项卡一', '选项卡二', '选项卡三']
      }
    },
    methods: {
      changeTab(e) {
        // 切换选项卡
      }
    }
  }
</script>

このコードでは、uni-tabs コンポーネントを作成し、それに 3 つの uni-tab コンポーネントを追加します。 uni-tabs このコンポーネントはタブのコンテナであり、画面サイズに適応できると同時に、いくつかのプロパティとイベントも提供します。このうち、使用する必要があるのはクリックイベント @click で、このイベントを通じてユーザーがクリックしたタブの情報を取得できます。次に、タブを切り替えるために changeTab メソッドでこれを処理する必要があります。

3. uni-list-view コンポーネントのセットアップ

次に、データを表示するために uni-list-view コンポーネントをセットアップする必要があります。具体的なコードは次のとおりです。

<template>
  <div>
    <uni-tabs @click="changeTab">
      <uni-tab :title="tabsData[0]"></uni-tab>
      <uni-tab :title="tabsData[1]"></uni-tab>
      <uni-tab :title="tabsData[2]"></uni-tab>
    </uni-tabs>
    <uni-list-view :ref="listViewRef" :list-data="currentData" :show-loading="true"></uni-list-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabsData: ['选项卡一', '选项卡二', '选项卡三'],
        data: {
          tab1: [{...}, {...}, {...}],
          tab2: [{...}, {...}, {...}],
          tab3: [{...}, {...}, {...}]
        },
        currentData: [],
        listViewRef: 'listView'
      }
    },
    onReady() {
      this.changeTab({
        detail: {
          index: 0
        }
      })
    },
    methods: {
      changeTab(e) {
        // 切换选项卡
        let index = e.detail.index
        switch (index) {
          case 0:
            this.currentData = this.data.tab1
            break
          case 1:
            this.currentData = this.data.tab2
            break
          case 2:
            this.currentData = this.data.tab3
            break
          default:
            break
        }
        // 刷新列表数据
        if (this.$refs[this.listViewRef]) {
          this.$refs[this.listViewRef].refresh()
        }
      }
    }
  }
</script>

ここでは、uni-list-view コンポーネントを作成し、リスト データを設定します。具体的には、データを data.tab1、data.tab2、data.tab3 にそれぞれ保存します。ユーザーが別のタブをクリックすると、タブの添え字に応じて、対応するリスト データが表示されます。 changeTab メソッドでは、this.$refs[this.listViewRef].refresh() メソッドを使用してリスト データを強制的に更新することに注意してください。

4. データのレンダリング

最後に、データを uni-list-view コンポーネントにレンダリングする必要があります。具体的なコードは次のとおりです。

<template>
  <div>
    <uni-tabs @click="changeTab">
      <uni-tab :title="tabsData[0]"></uni-tab>
      <uni-tab :title="tabsData[1]"></uni-tab>
      <uni-tab :title="tabsData[2]"></uni-tab>
    </uni-tabs>
    <uni-list-view :ref="listViewRef" :list-data="currentData" :show-loading="true">
      <template v-slot:item="{ item }">
        <view class="list-item">{{ item }}</view>
      </template>
    </uni-list-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabsData: ['选项卡一', '选项卡二', '选项卡三'],
        data: {
          tab1: ['数据1', '数据2', '数据3'],
          tab2: ['数据4', '数据5', '数据6'],
          tab3: ['数据7', '数据8', '数据9'],
        },
        currentData: [],
        listViewRef: 'listView'
      }
    },
    onReady() {
      this.changeTab({
        detail: {
          index: 0
        }
      })
    },
    methods: {
      changeTab(e) {
        // 切换选项卡
        let index = e.detail.index
        switch (index) {
          case 0:
            this.currentData = this.data.tab1
            break
          case 1:
            this.currentData = this.data.tab2
            break
          case 2:
            this.currentData = this.data.tab3
            break
          default:
            break
        }
        // 刷新列表数据
        if (this.$refs[this.listViewRef]) {
          this.$refs[this.listViewRef].refresh()
        }
      }
    }
  }
</script>

ここでは、v-slot:item テンプレート レンダリング メソッドを使用してデータ レンダリングを実現します。具体的には、v-for ループを使用して、リスト項目データを view コンポーネントにレンダリングします。

このようにして、UniApp の uni-tabs コンポーネントと uni-list-view コンポーネントを使用して、上部タブで異なるデータを切り替える機能を実装することに成功しました。 。

以上がUniAppのトップタブを実装して異なるデータを切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。