支付宝小程序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
        })
      }
    })
  }
});

入参

Object 类型，属性如下：

success 回调函数

Object 类型，属性如下：

常见问题 FAQ

Q：小程序右上角的 分享与收藏 可以设置颜色吗？

A：这是默认的，无法设置颜色。

my.hideBackHome

简介

my.hideBackHome 是隐藏标题栏上的返回首页图标（如下图所示）和右上角通用菜单中的返回首页功能的 API。

使用限制

• 基础库 1.16.4 或更高版本；支付宝客户端 10.1.52 或更高版本，若版本较低，建议采取 兼容处理。
• 用户启动小程序时，若进入的页面不是小程序首页，则会在左上角出现返回首页图标。
• 如果 app.json 中配置了 tabbar 跳转 pages/index/index 时，不会出现 返回首页 功能。

效果示例

接口调用

示例代码

//.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 参数失效</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：这是默认的，无法设置颜色。

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：小程序胶囊按钮内的菜单页是否可以支持自定义修改？

A：目前小程序胶囊按钮内的菜单页暂不支持自定义修改。

Q：导航栏的字体颜色可以自定义修改吗？

A：导航栏字体颜色无法自定义修改，但是可以通过修改背景颜色，自动调整变成黑色或白色的导航栏字体颜色。