uniapp はナビゲーション テキストを削除します

uniapp 開発プロセスでは、ナビゲーションは非常に重要な部分です。これは、ユーザーが現在のページの場所と機能をよりよく理解するのに役立ちます。ただし、場合によっては、ナビゲーション テキストを削除する必要がある場合があります。たとえば、デザイン スタイルの観点からは、ページをより簡潔かつ純粋にする必要があり、ナビゲーション テキストを削除することでこの目標を達成できます。では、uniapp でナビゲーション テキストを削除するにはどうすればよいでしょうか?

方法 1: ページ内のナビゲーション テキストを非表示にする

uniapp では、デフォルトのナビゲーション テキストはルーティング構成ファイルによって定義されます。たとえば、次のコード:

"tabBar": {
    "color": "#999",
    "selectedColor": "#1aad19",
    "backgroundColor": "#fafafa",
    "borderStyle": "black",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }

各タブのナビゲーション テキストが "text" 属性で定義されていることがわかります。したがって、このテキストをページ内で非表示にするだけで済みます。具体的な方法は、スタイルファイルの文字色を背景色と同じにするか、文字のフォントサイズを0に設定することです。コード例は次のとおりです。

<style>
  .uni-tab-item-text {
    font-size: 0;
  }
</style>

または

<style>
  .uni-tab-item-text {
    color: #fafafa;
  }
</style>

。ナビゲーション テキストは削除されました。

方法 2: プラグインを使用する

ナビゲーション テキストを削除する独自のコードを作成したくない場合は、uniapp コミュニティのプラグインを使用してこれを実現することもできます。たとえば、uni-simple-router プラグインを使用すると、ナビゲーション テキストを非常に簡単に削除できます。

まず、uni-simple-router を使用する場合、最初にタグを導入する必要があります。具体的な方法は、次のコードを main.js ファイルに追加することです。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
Vue.prototype.$router = router

import 'uni-simple-router'

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

次に、ルーティング構成ファイルの text 属性を title 属性に変更します。このようにして、uni-simple-router が有効になり、ナビゲーション タイトルの問題を自動的に処理できます。たとえば、次のコード:

{
  path: '/home',
  component: () => import('@/pages/home'),
  meta: {
    title: '首页'
  }
},
{
  path: '/user',
  component: () => import('@/pages/user'),
  meta: {
    title: '我的'
  }
}

最後に、uni-simple-router を使用してナビゲーション テキストを削除する方法を見てみましょう。ページでは、Enter の前にライフサイクル関数を追加し、この関数でナビゲーション テキストを空に設定するだけです。具体的なコードは次のとおりです。

<script>
export default {
  beforeEnter(to, from, next) {
    uni.showTabBar()
    uni.setNavigationBarTitle({
      title: ''
    })
    next()
  }
}
</script>

このようにして、このページにジャンプすると、ナビゲーション バーのタイトルが空になります。すべてのページからナビゲーション テキストを削除する場合は、beforeEnter 関数をグローバルに定義するだけで済みます。

概要:

上記の 2 つの方法の両方で、ナビゲーション テキストを削除できます。単一のページからナビゲーション テキストを削除する必要がある場合は、最初の方法を使用し、すべてのページからナビゲーション テキストを削除する必要がある場合は、2 番目の方法を使用すると便利です。もちろん、同じ効果を達成する他の方法もあります。つまり、実際のニーズと開発方法に基づいて、自分に合った方法を選択できます。

以上がuniapp はナビゲーション テキストを削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。