uniapp ページにタブバーがない場合はどうすればよいですか?

UniApp を使用してモバイル アプリケーションを開発する場合、ページの下部に TabBar を追加する必要が生じることがよくあります。ただし、UniApp を使用してページを開発すると、下部の TabBar が表示されない場合があります。これは、UniApp ではデフォルトでページに TabBar が含まれていないため、手動で追加する必要があるためです。

それでは、UniApp ページに TabBar を追加するにはどうすればよいでしょうか?以下、順を追って紹介していきます。

まず、TabBar コンポーネントを App.vue ファイルに追加する必要があります。 App.vue ファイルを開き、template タグの下のコードを見つけて、次の TabBar タグを追加します。

<tabbar>
  <tabbar-item icon="home" title="首页" path="/pages/index/index"></tabbar-item>
  <tabbar-item icon="search" title="搜索" path="/pages/search/search"></tabbar-item>
  <tabbar-item icon="cart" title="购物车" path="/pages/cart/cart"></tabbar-item>
  <tabbar-item icon="user" title="我的" path="/pages/user/user"></tabbar-item>
</tabbar>

上記のコードでは、「Home」、「Search」、「Search」という 4 つの TabBar メニューを追加しました。 「ショッピングカート」「マイ」を選択し、対応するページパスを指定します。このうち、各 TabBar メニューは tabbar-item タグで表されます。このタグには、アイコン、タイトル、パスの 3 つの属性が含まれています。これらの属性は、それぞれ、メニューの対応するページのアイコン、タイトル、パスを表します。

次に、各ページにページ パスを追加する必要があります。ホームページ上の Index.vue など、TabBar を追加するページを開き、script タグの下にあるエクスポートのデフォルト コード ブロックを見つけて、次のコードを追加します。

export default {
  onShow() {
    uni.setTabBarItem({
      index: 0,
      text: '首页',
      iconPath: '/static/tabBar/home.png',
      selectedIconPath: '/static/tabBar/home-active.png'
    })
  }
}

上記のコードでは、次のコードを使用します。 onShow ライフサイクル関数を使用して、現在のページの TabBar メニューを設定します。このうち、setTabBarItem 関数は、TabBar の特定のメニューのプロパティ (index、text、iconPath、selectedIconPath の 4 つのプロパティを含む) を設定するために使用されます。ここでは、メニューのインデックス、タイトル、通常状態のアイコン、選択状態のアイコンなど、「ホーム」メニューのプロパティを設定します。

最後に、pages.json 構成ファイルで各ページのパスを定義する必要があります。 Pages.json 構成ファイルを開き、次のコードを追加します。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/search/search",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/user/user",
      "style": {}
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabBar/home.png",
        "selectedIconPath": "/static/tabBar/home-active.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "/static/tabBar/search.png",
        "selectedIconPath": "/static/tabBar/search-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/static/tabBar/cart.png",
        "selectedIconPath": "/static/tabBar/cart-active.png",
        "badge": 0
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/static/tabBar/user.png",
        "selectedIconPath": "/static/tabBar/user-active.png"
      }
    ]
  }
}

上記のコードでは、4 つのページのパスを定義し、tabBar プロパティでページ パスを含む TabBar メニューのプロパティを定義します。メニューテキスト、通常状態のメニューアイコン、および選択状態のメニューアイコン。

この時点で、TabBar メニューを追加する手順は完了です。 UniApp アプリケーションを再コンパイルして、効果を確認できます。すべてがうまくいけば、ページの下部に TabBar メニューが表示されます。

一般に、UniApp にはデフォルトでは TabBar メニューが含まれていないため、手動で追加する必要があります。 TabBar コンポーネントを App.vue ファイルに追加し、各ページにページ パスを追加し、pages.json 構成ファイルで TabBar メニューのプロパティを定義することで、TabBar メニュー機能を簡単に実装できます。

以上がuniapp ページにタブバーがない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。