uniapp のタブ ページ コンポーネントの詳細な紹介

タブ ページ コンポーネントは、モバイル アプリケーション開発と Web アプリケーション開発の両方で非常に一般的に使用されるコンポーネントです。実際の開発においては、タブページのジャンプと戻りは頻繁に対応しなければならない問題です。この記事では、uniapp プラットフォームのタブ ページ コンポーネントについて、タブ ページへのジャンプ方法や戻り方などの知識ポイントを中心に詳しく紹介します。

1. uniapp でのタブ ページ コンポーネントの使用方法

uniapp では、タブ ページ コンポーネントはタブ ページの効果を簡単に組み合わせることができる非常に実用的なコンポーネントです。タブ ページ コンポーネントを使用する基本的な考え方は、各タブ ページをコンポーネントとして実装し、uniapp が提供するルーティング ジャンプ メカニズムを使用して、異なるタブ ページ間を切り替えることです。

まず、uniapp プロジェクトの Pages.json ファイルを開いて、次のコードを追加する必要があります。

{
  "path": "pages/tabbar",
  "style": {
    "navigationBarTitleText": "Tab页列表"
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#4d4d4d",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/tabbar/home",
      "text": "首页",
      "iconPath": "static/tabbar/home.png",
      "selectedIconPath": "static/tabbar/home-active.png"
    }, {
      "pagePath": "pages/tabbar/message",
      "text": "消息",
      "iconPath": "static/tabbar/message.png",
      "selectedIconPath": "static/tabbar/message-active.png"
    }]
  }
},

上記のコード例では、2 つのタブ ページを含む TabBar ページを定義しています。つまり、ホームページとメッセージページです。その中で、各タブ ページを独立したページとして実装する必要があります。

次に、uniapp のページマネージャーを開き、指定されたパスの下にホームとメッセージの 2 つのページを作成します。これら 2 つのページには任意のページを指定できますが、TabBar コンポーネントの tabBarItem の pagePath が指すパスと一致している必要があることに注意してください。

<template>
  <view class="content">
    <text>这里是首页</text>
  </view>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<template>
  <view class="content">
    <text>这里是消息页</text>
  </view>
</template>

<script>
export default {
  name: 'Message'
}
</script>

上記のコードでは、ホームとメッセージの 2 つのページを作成しただけです。

上記の手順を完了すると、アプリケーションの下部にタブ ページが表示されます。このタブ ページには、作成したばかりのホーム ページとメッセージ ページに対応する 2 つのタブ ページが含まれています。

2. タブ ページへのジャンプ方法

uniapp では、タブ ページ ジャンプは通常のページ ジャンプと非常によく似ており、それらはすべて uniapp が提供するルーティング ジャンプ メカニズムを通じて実装されます。 。ただし、タブ ページ間をジャンプしているため、ジャンプ先のタブ ページを制御するには特定の命令を使用する必要があります。

まず、タブ ページのジャンプを指定する命令をタブ ページに追加する必要があります。

<template>
  <view class="content">
    <button @click="gotoMessage">跳转到消息页</button>
  </view>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoMessage: function () {
      uni.switchTab({
        url: '/pages/tabbar/message'
      })
    }
  }
}
</script>

上記のコードでは、uni.switchTab() メソッドを通じて Tab を実装します。ページジャンプ。このうち、incoming url パラメータは、ジャンプ先のタブ ページへのパスを指定します。

タブ ページ上でジャンプ操作を実行すると、アプリケーションは自動的にターゲットのタブ ページにジャンプします。

3. タブ ページで戻る方法

タブ ページで戻る操作を実行するときに注意すべき点は、タブ ページで戻る操作を実行すると、代わりにアプリケーションが直接終了することです。戻るの. 前のページ。したがって、リターン操作を制御する追加の命令をタブ ページに追加する必要があります。

まず、特定のタブ ページに命令を追加し、uni.navigateBack() メソッドを通じてリターン操作を実装する必要があります。

<template>
  <view class="content">
    <button @click="backToHome">返回首页</button>
  </view>
</template>

<script>
export default {
  name: 'Message',
  methods: {
    backToHome: function () {
      uni.switchTab({
        url: '/pages/tabbar/home'
      })
    }
  }
}
</script>

上記のコードでは、次のコードも使用します。 uni.switchTab() メソッドは、タブ ページのジャンプ操作を実装するために使用されます。ただし、以前と異なるのは、通常のページではなくタブページにジャンプすることです。

今回は switchTab() メソッドを使用したことに注意してください。これは、タブ ページで navigateBack() メソッドを使用すると、アプリケーションが直接終了し、通常のページのように戻る操作を実行できないためです。したがって、戻る操作をタブ ページ間のジャンプに変換する必要があります。

概要:

この記事では主に、uniapp プラットフォームでタブ ページ コンポーネントを使用してタブ ページにジャンプしたり戻ったりする方法を紹介します。実際の開発において、タブページコンポーネントは、自分に合ったタブページの効果を簡単に組み合わせたり、よりスムーズなページジャンプや操作を実現したりする非常に実用的なコンポーネントです。読者は、この記事で説明されている内容に基づいて独自のアプリケーションでタブ ページ コンポーネントを使用し、必要なタブ ページ効果を実現できます。

以上がuniapp のタブ ページ コンポーネントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。