ホームページ > 記事 > ウェブフロントエンド > uniappでボトムナビゲーションの隠し機能を実装する方法
uniapp を使用してモバイル アプリケーションを開発する場合、下部のナビゲーション バーの存在により、ユーザーはページや機能をすばやく切り替えることができ、ユーザー エクスペリエンスと操作効率が向上します。ただし、特殊なケースでは、下部のナビゲーション バーを非表示にする必要がある場合があります。この記事では、uniapp で下部のナビゲーション バーを非表示にする方法を紹介します。
1. 下部ナビゲーション バーの基本的な使用法
uniapp の下部ナビゲーション バーは、pages.json ファイルで構成されており、下部メニューのスタイル、アイコン、ジャンプを設定できます。 bar リダイレクトされるページに関する情報。以下は簡単なサンプル コードです。
{ "pages":[ { "path":"pages/index/index", "name":"index", "style":{ "navigationBarTitleText":"首页" } }, { "path":"pages/user/user", "name":"user", "style":{ "navigationBarTitleText":"个人中心" } } ], "tabBar":{ "color":"#666", "selectedColor":"#4285f4", "backgroundColor":"#ffffff", "list":[ { "pagePath":"pages/index/index", "text":"首页", "iconPath":"static/img/tabbar/home.png", "selectedIconPath":"static/img/tabbar/home-selected.png" }, { "pagePath":"pages/user/user", "text":"我的", "iconPath":"static/img/tabbar/user.png", "selectedIconPath":"static/img/tabbar/user-selected.png" } ] }, "globalStyle":{ "navigationBarBackgroundColor":"#fff", "navigationBarTextStyle":"black" } }
上記のコードでは、すべてのページ情報を構成するために「pages」配列が使用され、ページのスタイルとジャンプ情報を構成するために「tabBar」オブジェクトが使用されます。下部のメニューバー。このうち、「list」配列内の各オブジェクトは、「pagePath」(ジャンプ ページ パス)、「text」(メニュー項目テキスト)、「iconPath」(選択されていないときのアイコン パス)、「selectedIconPath」などの下部メニュー項目を表します。 ” (選択時のアイコン パス) およびその他の属性。
2. 下部ナビゲーション バーを非表示にする方法
シナリオによっては、特別なインタラクティブ効果や全画面表示、その他の機能を実現するために、下部ナビゲーション バーを非表示にする必要がある場合があります。 uniapp では、下部のナビゲーション バーを非表示にする方法がいくつかあります。
vue-router のメタ情報を通じてページを設定できます。 vue-router 下部のナビゲーション バーを非表示にするかどうかなど、いくつかの特殊なプロパティ。 Pages.json で vue-router を構成する場合、meta フィールドを追加し、meta に必要な情報を追加し、this.$route.meta.xxx を使用してページ コンポーネントでそれを取得できます。
{ "pages": [ { "path": "pages/index/index", "name": "index", "meta": { "showTabbar": true } }, { "path": "pages/user/user", "name": "user", "meta": { "showTabbar": false } } ], "tabBar": {...} }
上記のコードでは、pages.json に「meta」フィールドを追加して、ページに下部ナビゲーション バーを表示する必要があるかどうかを設定します。これは、成分。
下部のナビゲーション バーが非表示になっているページでは、ページ下部のスタイルを手動で設定する必要があります。たとえば、下部のナビゲーション バーの高さと同じ高さの div を設定して置き換えます。ナビゲーション バーを使用して、ページが正常に表示されることを確認します。
<template> <div> <div class="content"> ... </div> <div class="placeholder"></div> </div> </template> <style> .placeholder { height: 100rpx; } </style>
上記のコードでは、下部のナビゲーション バーの位置を置き換えるために、高さ 100rpx の div を下部に追加しました。
uniapp メイン エントリ ファイル app.vue で、グローバル変数を定義できます。 to 下部のナビゲーション バーを表示するかどうかを制御します。具体的な操作方法は以下の通りです。
<template> <div class="app"> <uni-tab-bar v-if="showTabBar" /> <router-view /> </div> </template> <script> export default { data() { return { showTabBar: true } }, mounted() { const pages = getCurrentPages() const currentPage = pages[pages.length - 1] this.showTabBar = currentPage.route.indexOf('/home') !== -1 // 在这里根据当前页面路由来设置showTabBar的值 } } </script>
上記のコードでは、現在のページのルートを取得することで、下部のナビゲーションバーを表示する必要があるかどうかを判断しています。表示する必要がある場合は、showTabBar 変数を true に設定し、それ以外の場合は false に設定します。 app.vue コンポーネントでは、v-if ディレクティブを使用して、showTabBar の値に基づいて下部ナビゲーション バーを表示するかどうかを決定します。
下部ナビゲーション バーが非表示になっているページでは、ページが正常に表示されるように、下部ナビゲーション バーの高さと同じ高さの div を追加する必要もあります。
<template> <div> <div class="content"> ... </div> <div class="placeholder"></div> </div> </template> <style> .placeholder { height: 100rpx; } </style>
uni-tab-bar は、によって提供されるデフォルトのタブです。 uniapp Bar コンポーネントでは、動的バインディングを使用して下部ナビゲーション バーの表示と非表示を制御できます。具体的な操作方法は以下の通りです。
<template> <div class="tab-bar" :class="{'hidden':hidden}"> <div class="item" v-for="(tab,index) in tabList" :key="index" @click="switchTab(index)"> <div class="icon" :class="{'active':tab.active}"> <img :src="tab.active ? tab.selectedIconPath : tab.iconPath" /> </div> <div class="text" :class="{'active':tab.active}">{{tab.text}}</div> </div> </div> </template> <script> export default { props: { hidden: Boolean, tabList: Array, color: String, selectedColor: String, backgroundColor: String }, methods: { switchTab(index) { this.$emit('switchTab', index) } } } </script> <style> .hidden { display: none; } </style>
上記のコードでは、下部ナビゲーションバーの表示・非表示を制御するhidden属性を定義しています。 uni-tab-bar コンポーネントをページ コンポーネントに導入する場合、hidden 属性を動的にバインドすることで下部のナビゲーション バーを表示するかどうかを制御できます。
下部のナビゲーション バーが非表示になっているページでは、ページ下部のスタイルを手動で設定する必要があります。たとえば、下部のナビゲーション バーの高さと同じ高さの div を追加して置き換えます。ナビゲーションバー。
<template> <div class="content"> ... </div> <div class="placeholder"></div> </template> <style> .placeholder { height: 100rpx; } </style>
上記は、uniapp の下部ナビゲーション バーを非表示にする 3 つの方法です。使用する場合は、自分のニーズに応じて最適な方法を選択する必要があります。
以上がuniappでボトムナビゲーションの隠し機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。