Mobile Platform as a Service:ナビゲーションバー

my.getTitleColor

この API を使用して、ナビゲーションバーの背景色を取得します。

バージョン要件: このインターフェイスは、基本ライブラリバージョン 1.13.0 以降でサポートされています。以前のバージョンでは互換性処理が必要です。詳細については、「ミニプログラム基本ライブラリ」をご参照ください。

コードサンプル

// API-DEMO page/API/get-title-color/get-title-color.json
{
    "defaultTitle": "ナビゲーションバーの背景色を取得する"
}

<!-- API-DEMO page/API/get-title-color/get-title-color.axml-->
<view>
  <view class="page-section-demo">
    <text>ナビゲーションバーの現在の背景色:
    </text>
    <input type="text" disabled="{{true}}" value="{{titleColor.color}}">
    </input>
  </view>
  <view class="page-section-btns">
    <view onTap="getTitleColor">ナビゲーションバーの背景色を取得する
    </view>
  </view>
</view>

// API-DEMO page/API/get-title-color/get-title-color.js
Page({
  data: {
    titleColor: {},
  },
  getTitleColor() {
    my.getTitleColor({
      success: (res) => {
        this.setData({
          titleColor: res
        })
      }
    })
  }
});

パラメーター

入力パラメーターは Object 型で、属性は次のとおりです。

成功コールバック関数

Object 型で、属性は次のとおりです。

FAQ

Q: ミニプログラムの右上隅にある [共有と お気に入り] の色を設定できますか。

A: この色はデフォルトで、設定できません。

my.hideBackHome

この API を使用して、上部ナビゲーションバーのホームボタンと、右上隅のタブバーにあるホームに戻るオプションを非表示にします。

バージョン要件: このインターフェイスは、基本ライブラリバージョン 1.16.4 以降でサポートされています。以前のバージョンでは互換性処理が必要です。詳細については、「ミニプログラム基本ライブラリ」をご参照ください。

コードサンプル

//.js
Page({
  onReady() {
    if (my.canIUse('hideBackHome')) {
      my.hideBackHome();
    }
  },
});

//.js
onLoad(){
    my.reLaunch()({
    url:'../swiper/swiper'// ホームページ以外の追加ページ
  })

  setTimeout(() => {
    // 5 秒後にホームボタンを非表示にする
    my.hideBackHome()
  }, 5000)
}

my.hideNavigationBarLoading

この API を使用して、ナビゲーションバーの読み込みを非表示にします。

コードサンプル

// API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
{
    "defaultTitle": "タイトルバーのローディングアニメーション"
}

<!-- API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="showNavigationBarLoading">ローディングアニメーションを表示</button>
    <button onTap="hideNavigationBarLoading">ローディングアニメーションを非表示</button>
  </view>
</view>

// API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.js
Page({
  showNavigationBarLoading() {
    my.showNavigationBarLoading()
  },
  hideNavigationBarLoading() {
    my.hideNavigationBarLoading()
  }
})

/* API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.acss */
button + button {
  margin-top: 20rpx;
}

my.showNavigationBarLoading

この API を使用して、ナビゲーションバーの読み込みを表示します。

コードサンプル

// API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
{
    "defaultTitle": "タイトルバーのローディングアニメーション"
}

<!-- API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="showNavigationBarLoading">ローディングアニメーションを表示</button>
    <button onTap="hideNavigationBarLoading">ローディングアニメーションを非表示</button>
  </view>
</view>

// API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.js
Page({
  showNavigationBarLoading() {
    my.showNavigationBarLoading()
  },
  hideNavigationBarLoading() {
    my.hideNavigationBarLoading()
  }
})

/* API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.acss */
button + button {
  margin-top: 20rpx;
}

my.setNavigationBar

この API を使用して、ナビゲーションバーのスタイルを設定します。ナビゲーションバーのタイトル、ナビゲーションバーの背景色、ナビゲーションバーの下枠線の色、ナビゲーションバーの左上隅にあるロゴ画像。

コードサンプル

// API-DEMO page/API/set-navigation-bar/set-navigation-bar.json
{
    "defaultTitle": "ページナビゲーションバーを設定する"
}

<!-- API-DEMO page/API/set-navigation-bar/set-navigation-bar.axml-->
<view class="page">
  <view class="page-description">ナビゲーションバー API を設定する</view>
  <form onSubmit="setNavigationBar" style="align-self:stretch">
    <view class="page-section">
      <view class="page-section-demo">
        <input class="page-body-form-value" type="text" placeholder="タイトル" name="title"></input>
        <input class="page-body-form-value" type="text" placeholder="ナビゲーションバーの背景色" name="backgroundColor"></input>
        <input class="page-body-form-value" type="text" placeholder="ナビゲーションバーの下枠線の色" name="borderBottomColor"></input>
        <input class="page-body-form-value" type="text" placeholder="ナビゲーションバーの画像アドレス" name="image"></input>
      </view>
      <view class="page-section-btns">
        <button type="primary" size="mini" formType="submit">設定</button>
        <button type="primary" size="mini" onTap="resetNavigationBar">リセット</button>
      </view>
    </view>
  </form>
  <view class="tips">
    ヒント:
   <view class="item">1. image: 画像リンクアドレス。HTTPS アドレスである必要があります。3x HD 画像を使用してください。画像が設定されている場合、title パラメーターは無効です。</view>
   <view class="item">2. backgroundColor: ナビゲーションバーの背景色。16 進数のカラー値をサポートします。</view>
   <view class="item">3. borderBottomColor: ナビゲーションバーの下枠線の色。16 進数のカラー値をサポートします。backgroundColor が設定されている場合、borderBottomColor は有効にならず、デフォルトで backgroundColor と同じ色になります。</view>
  </view>
</view>

// API-DEMO page/API/set-navigation-bar/set-navigation-bar.js
Page({
  setNavigationBar(e) {
    var title = e.detail.value.title;
    var backgroundColor = e.detail.value.backgroundColor;
    var borderBottomColor = e.detail.value.borderBottomColor;
    var image = e.detail.value.image;
    console.log(title)
    my.setNavigationBar({
      title,
      backgroundColor,
      borderBottomColor,
      image,
    })
  },
  resetNavigationBar() {
    my.setNavigationBar({
      reset: true,
      title: 'ナビゲーションバーのスタイルをリセット',
    });
  }
})

/* API-DEMO page/API/set-navigation-bar/set-navigation-bar.acss */
.page-section-btns {
  padding: 26rpx;
}

パラメーター

入力パラメーターは Object 型で、属性は次のとおりです。

FAQ

Q: ミニプログラムの右上隅にある [共有とお気に入り] の色を設定できますか。

A: この色はデフォルトで、設定できません。

関連情報

iOS @3x 解像度標準の詳細については、「画像サイズと解像度」をご参照ください。

ナビゲーションバーに関する FAQ

• Q: ミニプログラムの右上隅にある [共有と お気に入り] の色を設定できますか。

  A: この色はデフォルトで、設定できません。

• Q: ミニプログラムカプセルボタンのメニューページを変更できますか?

  A: 現在、ミニプログラムカプセルボタンのメニューページは、カスタム変更をサポートしていません。

• Q: ナビゲーションバーのフォントの色を変更できますか?

  A: ナビゲーションバーのフォントの色はカスタマイズおよび変更できませんが、背景色を変更して、ナビゲーションバーのフォントの色を黒または白に自動的に調整することができます。