支付寶小程序API 導航欄

my.getTitleColor

簡介

my.getTitleColor 是獲取導航欄背景色的 API。

使用限制

基礎庫 1.13.0 或更高版本；支付寶客戶端 10.1.50 或更高版本，若版本較低，建議采取 兼容處理。

示例代碼

// 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
        })
      }
    })
  }
});

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

success 回調(diào)函數(shù)

Object 類型，屬性如下：

常見問題 FAQ

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

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

my.hideBackHome

簡介

my.hideBackHome 是隱藏標題欄上的返回首頁圖標（如下圖所示）和右上角通用菜單中的返回首頁功能的 API。

使用限制

• 基礎庫 1.16.4 或更高版本；支付寶客戶端 10.1.52 或更高版本，若版本較低，建議采取 兼容處理。
• 用戶啟動小程序時，若進入的頁面不是小程序首頁，則會在左上角出現(xiàn)返回首頁圖標。
• 如果 app.json 中配置了 tabbar 跳轉(zhuǎn) pages/index/index 時，不會出現(xiàn) 返回首頁 功能。

效果示例

接口調(diào)用

示例代碼

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

//.js
onLoad(){
    my.reLaunch({
    url:'../swiper/swiper'// 在頁面中添加的非首頁
  })
  setTimeout(() => {
    //5秒后隱藏返回首頁按鈕
    my.hideBackHome()
  }, 5000)
}

my.hideNavigationBarLoading

簡介

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.setNavigationBar

簡介

my.setNavigationBar 是設置導航欄樣式（包括：導航欄標題、導航欄背景色、導航欄底部邊框顏色、導航欄左上角 logo 圖片）的 API。

使用限制

• 導航欄左上角 logo 圖片支持 gif 格式，必須使用 HTTPS 圖片鏈接。
• 若設置了導航欄背景色 backgroundColor，則導航欄底部邊框顏色 borderBottomColor 不會生效，默認會和 backgroundColor 顏色一樣。
• 導航欄背景色不支持漸變色。

掃碼體驗

示例代碼

// 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 參數(shù)失效</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;
}

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
title	String	否	導航欄標題。
image	String	否	圖片鏈接地址（支持 gif 格式圖片），必須是 HTTPS，請使用 iOS @3x 分辨率標準的高清圖片。若設置了 image 則 title 參數(shù)失效。
backgroundColor	String	否	導航欄背景色，支持十六進制顏色值。
borderBottomColor	String	否	導航欄底部邊框顏色，支持十六進制顏色值。若設置了 backgroundColor，則 borderBottomColor 不會生效，默認會和 backgroundColor 顏色一樣。
reset	Boolean	否	是否重置導航欄為支付寶默認配色，默認為 false。
success	Function	否	調(diào)用成功的回調(diào)函數(shù)。
fail	Function	否	調(diào)用失敗的回調(diào)函數(shù)。
complete	Function	否	調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）。

常見問題 FAQ

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

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

my.showNavigationBarLoading

簡介

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;
}

導航欄 FAQ

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

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

Q：小程序膠囊按鈕內(nèi)的菜單頁是否可以支持自定義修改？

A：目前小程序膠囊按鈕內(nèi)的菜單頁暫不支持自定義修改。

Q：導航欄的字體顏色可以自定義修改嗎？

A：導航欄字體顏色無法自定義修改，但是可以通過修改背景顏色，自動調(diào)整變成黑色或白色的導航欄字體顏色。