uniapp ネイティブ タイトル バーに戻るボタンを設定する方法

ご存知のとおり、uniapp は一度に作成されたクロスプラットフォームのマルチエンド フロントエンド フレームワークです。 uniapp を使用してモバイル APP を開発する場合、多くの場合、タイトル バーと戻るボタンを追加する必要があります。 uniapp はデフォルトで統一されたタイトルバーと戻るボタンを提供しますが、実際の開発ではタイトルバーと戻るボタンをカスタマイズする必要があることがよくあります。この記事では、uniappのネイティブタイトルバーに戻るボタンを設定する方法を紹介します。

1. uniapp のネイティブ タイトル バーと戻るボタン

uniapp では、ページの「navigationBarTitleText」を構成することでページ タイトルを設定できます。同時に、ページルーティングでは、「navigationBarBackgroundColor」、「navigationBarTextStyle」などのプロパティを使用して、タイトルバーの背景色と前景色を設定できます。

uniapp ネイティブ タイトル バーは、戻るボタンを自動的に生成し、ページ ルーティングの深さの関係に基づいて、対応する矢印とテキストを戻るボタンに表示します。

2. uniapp のネイティブの戻るボタンのパーソナライズされた設定

ボタンのテキストやスタイルの変更など、戻るボタンをパーソナライズしたい場合は、特別な処理を実行する必要があります。

uniapp は、戻るボタンをカスタマイズできる 2 つの API「onNavigationBarButtonTap」と「setNavigationBarTitle」を提供します。これら 2 つの API をページのライフサイクル メソッドで使用して、「戻る」ボタンをパーソナライズできます。

1. 戻るボタンのテキストを変更する

「onNavigationBarButtonTap」API を呼び出すことで、戻るボタンのクリック イベントをキャプチャし、戻るテキストを設定できます。イベント処理メソッドのボタン。

ページの「onLoad」メソッドに次のコードを追加します。

onLoad: function() {
  uni.showNavigationBarLoading()
  uni.onNavigationBarButtonTap(function(res) {
    console.log(res) // res.index 表示点击的按钮的索引，2 表示返回
  })
}

イベント処理メソッドでは、「setNavigationBarTitle」API を呼び出して戻るボタンのテキストを変更できます。

uni.setNavigationBarTitle({
    title: '自定义标题'
})

設定が完了すると、戻るボタンの文字列が「カスタムタイトル」になります。

2. 戻るボタンのスタイルを変更する

戻るボタンのアイコン、色、サイズの設定など、戻るボタンのスタイルを変更したい場合、CSSスタイルシートを使用する必要があります。

CSS スタイル シートでは、次の方法で戻るボタンのスタイルを設定できます。

/* 修改返回按钮的图标 */
.page-navigation-bar .uni-icon-back {
  background-image: url(images/back.png);
}

/* 修改返回按钮的颜色 */
.page-navigation-bar .uni-tabbar-item-active {
  color: #007aff;
}

/* 修改返回按钮的大小 */
.page-navigation-bar .uni-tabbar-item-active {
  font-size: 30rpx;
}

3. 戻るボタンの表示/非表示

一部のページで戻るボタンを非表示にするには、「setNavigationBar」API を使用する必要があります。このAPIを通じて、メインタイトル、サブタイトル、戻るボタンを表示するかどうかを設定できます。

// 隐藏返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: true
})

// 显示返回按钮
uni.setNavigationBar({
    title: '自定义主标题',
    backgroundColor: '#fff',
    hideBackButton: false
})

上記は、uniapp のネイティブ タイトル バーの戻るボタンのパーソナライズされた設定です。単純な API 呼び出しと CSS スタイル シート設定を通じて、戻るボタンのテキスト、スタイル、表示状態を簡単に変更して、視覚的にユニークなタイトル バー効果を実現できます。

以上がuniapp ネイティブ タイトル バーに戻るボタンを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。