uniappのトップナビゲーションをキャンセルする方法

モバイル アプリケーションでは、通常、ナビゲーション バーは、ユーザーが現在の場所と利用可能なナビゲーション オプションを理解できるようにするために使用されます。ただし、場合によっては、上部のナビゲーションを削除した方がアプリケーションのニーズに適合する場合があります。 UNIAPPではトップナビゲーションの解除は非常に簡単ですが、次に具体的な方法を紹介します。

トップナビゲーションをキャンセルする理由は何ですか?

場合によっては、特にさまざまなアプリケーション シナリオやユーザーの動作を考慮すると、アプリケーションのページにトップ ナビゲーション バーが必要ないことがあります。トップ ナビゲーション バーをキャンセルした方がユーザー エクスペリエンスに適している場合があります。たとえば、シンプルな全画面スライドショーを作成したい場合、ユーザーの注意をそらす上部のナビゲーション バーは必要ありませんが、スライド自体のコンテンツにもっと集中する必要があります。

UNIAPP でのトップ ナビゲーションの実装をキャンセルします。

1. manifest.json で "navigationStyle": "custom" を設定します。

UNIAPP プロジェクト マニフェストを開きます。 json ファイルで、「globalStyle」オプションの下にある「navigationStyle」属性を見つけます。以下に示すように、「カスタム」に変更します。

"globalStyle": {
  "navigationStyle": "custom"
},

「カスタム」を設定すると、ページにデフォルトのナビゲーション バーが表示されなくなります。

2. ページ スタイルにpadding-topを設定する

デフォルトのナビゲーション バーがキャンセルされているため、コンテンツが表示されないようにページにpadding-topを追加する必要があります。ブロックされてる。次のコードをページのスタイルに追加できます。

page {
  padding-top: env(safe-area-inset-top);
}

この手法を使用すると、ページ上の要素が隠されるのを防ぎながら、アプリケーションの重要な情報をより適切に強調表示することができます。

3. ボタン イベント ジャンプ

ナビゲーション バーをキャンセルした後、ユーザーがアプリケーション全体を参照できるように、ページにジャンプ機能を実装する必要があります。ただし、このときに考えなければならないのは、ナビゲーションバーをキャンセルしても、ナビゲーション機能を完全に放棄する必要があるわけではないということです。したがって、ボタンを再定義し、JS コードにイベント リスナーを追加してジャンプを実装します。

UNIAPP では、ボタンを uni-icons アイコン ライブラリによって提供されるアイコンに置き換えることができます。コードは次のとおりです:

<template>
  <view>
    <button @tap="redirectToIndex" class="icon-btn">
      <uni-icons type="home" size="30"></uni-icons>
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    redirectToIndex() {
      uni.redirectTo({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style>
.icon-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

上記のコードは、「icon-btn」ボタンを定義しますフローティング固定位置を定義します。右下隅が操作位置で、残りのスタイルはカスタマイズされます。このボタンを使用する場合、ページジャンプは主に JS イベントの uni.redirectTo() 関数によって実現されます。この関数は、現在のページを閉じて、ユーザーをアプリケーションのホームページにリダイレクトします。

概要

UNIAPP のトップ ナビゲーションをキャンセルするのは非常に簡単です。プロジェクトの manifest.json ファイルに NavigationStyle 属性を設定し、次に、padding-top 属性を設定するだけです。ページ。さらに、ジャンプ機能を実装するには、ボタンを追加し、それに JS イベントを追加して、アプリケーション内でページ操作を実行できます。このアプローチにより、アプリケーションのユーザーにより良いユーザー エクスペリエンスを提供する自由と機会を提供できます。

以上がuniappのトップナビゲーションをキャンセルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。