my.getTitleColor

該接口用于獲取導航欄背景色。

版本要求：基礎庫 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 類型，屬性如下：

success 回調函數

Object 類型，屬性如下：

常見問題

• Q：可以設置小程序右上角 分享與收藏 的顏色嗎？

• A：該顏色是默認的，無法設置。

my.hideBackHome

該接口用于隱藏標題欄上的返回首頁圖標（如下圖所示）和右上角通用菜單中的返回首頁功能。

版本要求：基礎庫 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-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-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

該接口用于設置導航欄樣式：導航欄標題、導航欄背景色、導航欄底部邊框顏色、導航欄左上角 logo 圖片。

效果示例

代碼示例

// 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">
    tips:
   <view class="item">1. image：圖片鏈接地址，必須是 HTTPS 地址，請使用一張3x高清圖。若設置了 image，則 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 類型，屬性如下：

常見問題

• Q：可以設置小程序右上角 分享與收藏 的顏色嗎？ A：該顏色是默認的，無法設置。

相關信息

更多關于 iOS @3x 分辨率標準的信息，參見 Image Size and Resolution。

導航欄常見問題

• Q：可以設置小程序右上角 分享與收藏 的顏色嗎？ A：該顏色是默認的，無法設置。

• Q：小程序膠囊按鈕內的菜單頁是否可以支持自定義修改？ A：目前小程序膠囊按鈕內的菜單頁暫不支持自定義修改。

• Q：導航欄的字體顏色可以自定義修改嗎？ A：導航欄字體顏色無法自定義修改，但是可以通過修改背景顏色，自動調整變成黑色或白色的導航欄字體顏色。