Mobile Platform as a Service：導覽列

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：導覽列字型顏色無法自訂修改，但是可以通過修改背景顏色，自動調整變成黑色或白色的導覽列字型顏色。