UniAppでカスタムボトムメニューとTabBarを実装する方法

UniApp は、Vue.js をベースにしたクロスプラットフォーム開発フレームワークで、iOS、Android、小規模プログラムなどの複数のプラットフォーム向けのアプリケーションの開発に使用できます。 UniApp では、カスタマイズされたボトム メニューと TabBar を実装することが一般的な要件です。この記事では、UniApp を使用してカスタム ボトム メニューと TabBar メソッドを実装する方法を紹介し、対応するコード例を添付します。

まず、UniApp プロジェクトを作成する必要があります。 UniApp 開発ツールを開き、新しいプロジェクトの作成を選択してプロジェクト名、プラットフォーム、その他の情報を入力し、[作成] ボタンをクリックして基本的な UniApp プロジェクト構造を生成します。

次に、プロジェクトのルート ディレクトリで「pages」フォルダーを見つけ、そのフォルダーに入り、「tabBar」という名前のフォルダーを作成する必要があります。このフォルダーには、TabBar に関連する複数のページ ファイルを作成できます。たとえば、「home」、「mine」、「cart」、「category」の 4 つのページ ファイルを作成できます。

各ページ ファイルでは、以下に示すように、d477f9ce7bf77f53fbcf36bec1b69b7a タグを追加してページの構造を定義する必要があります。各ページ ファイルの

3f1c4e4b6b16bbbd69b2ee476dc4f83a

タグに tabBar オプションを追加して、ページを TabBar に表示するかどうかを指定する必要があります。たとえば、次のコードを「ホーム」ページ ファイルに追加できます。 <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;view class=&quot;page&quot;&gt; &lt;!-- 页面内容 --&gt; &lt;/view&gt; &lt;/template&gt;</pre> 上記のコードでは、

tabBar

オプションを true に設定します。ページが TabBar に表示されることを確認します。 次に、プロジェクトの「pages.json」ファイルで TabBar 関連の情報を構成する必要があります。ファイルを開き、

"tabBar"

フィールドを見つけて、次のコードを追加します。 <pre class='brush:php;toolbar:false;'>&lt;script&gt; export default { // tabBar选项 tabBar: true, // 页面数据 // 页面生命周期 } &lt;/script&gt;</pre>上記のコードでは、

"tabBar"

フィールドを使用して構成しました。 TabBar スタイルやページパスなどの情報。このうち、"color" フィールドは選択されていない TabBar アイコンとテキストの色を表し、"selectedColor" フィールドは選択された TabBar アイコンとテキストの色を表します。 #"list" フィールドは、ページ パス、表示テキスト、選択されていないアイコン パス、選択されたアイコン パスなどを含む、各 TabBar ボタンの情報を構成するために使用される配列です。 次に、TabBar が配置されているページに対応するコンテンツを追加できます。たとえば、「ホーム」ページ ファイルに次のコードを追加できます。

"tabBar": {
  "color": "#ccc",
  "selectedColor": "#000",
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "static/images/tabbar/home.png",
      "selectedIconPath": "static/images/tabbar/home_selected.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "static/images/tabbar/category.png",
      "selectedIconPath": "static/images/tabbar/category_selected.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "static/images/tabbar/cart.png",
      "selectedIconPath": "static/images/tabbar/cart_selected.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "static/images/tabbar/mine.png",
      "selectedIconPath": "static/images/tabbar/mine_selected.png"
    }
  ]
}

上記のコードでは、ページの構造に

89c662c6f8b87e82add978948dc499d2

タグを追加しました。 , その中にテキストコンテンツが表示されます。

最後に、プロジェクトの「App.vue」ファイルで TabBar の場所を定義する必要があります。ファイルを開き、d477f9ce7bf77f53fbcf36bec1b69b7a

タグを見つけて、その中に次のコードを追加します。

<template>
  <view class="page">
    <!-- 页面内容 -->
    <view class="content">
      <text>这是首页</text>
    </view>
  </view>
</template>

上記のコードでは、 TabBar を表示するコンポーネント。そして、

"tabBar" という名前のスタイル クラスを追加して、TabBar の表示位置を制御します。 上記の手順により、下部メニューと TabBar をカスタマイズする効果を実現できます。

要約すると、UniApp でカスタマイズされたボトム メニューと TabBar を実装する方法は次のとおりです。

UniApp プロジェクトを作成し、「pages」フォルダーに入ります。

「pages」フォルダーの下に「tabBar」フォルダーを作成し、そのフォルダーの下に複数の TabBar 関連のページ ファイルを作成します。
1. 各ページ ファイルで、
2. d477f9ce7bf77f53fbcf36bec1b69b7a
タグを追加してページの構造を定義し、
3. 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに # を追加します。 #tabBar オプションで、ページを TabBar に表示するかどうかを指定します。 プロジェクトの「pages.json」ファイルで、スタイル、ページ パス、表示テキスト、アイコン パスなどの TabBar 関連情報を構成します。 TabBar が配置されているページに、対応するコンテンツを追加します。
4. 「App.vue」ファイルでTabBarの位置を定義し、スタイルクラスを追加してTabBarの表示位置を制御します。
5. 上記の手順により、下部メニューと TabBar の効果を簡単にカスタマイズできます。
6. この記事の内容がお役に立てば幸いです。

以上がUniAppでカスタムボトムメニューとTabBarを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。