uniappでボトムナビゲーションの隠し機能を実装する方法-uni-app-php.cn

uniappでボトムナビゲーションの隠し機能を実装する方法

PHPz

リリース： 2023-04-18 14:37:40

オリジナル

6499 人が閲覧しました

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 のメタ情報を通じてページを設定できます。 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 を下部に追加しました。

app.vue でグローバル変数を使用して、下部のナビゲーションバーを表示するかどうかを制御します。

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 コンポーネントで動的バインディングを使用して、下部のナビゲーションバーを表示するかどうかを制御します

uni-tab-bar は、によって提供されるデフォルトのタブです。 uniapp Bar コンポーネントでは、動的バインディングを使用して下部ナビゲーションバーの表示と非表示を制御できます。具体的な操作方法は以下の通りです。

<template>
  <div class="tab-bar" :class="{&#39;hidden&#39;:hidden}">
    <div class="item" v-for="(tab,index) in tabList" :key="index" @click="switchTab(index)">
      <div class="icon" :class="{&#39;active&#39;:tab.active}">
        <img :src="tab.active ? tab.selectedIconPath : tab.iconPath" />
      </div>
      <div class="text" :class="{&#39;active&#39;: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 サイトの他の関連記事を参照してください。