全部产品
云市场
云游戏

导航栏

更新时间:2020-07-07 19:42:16

my.getTitleColor

该接口用于获取导航栏背景色。

版本要求:基础库 1.13.0 或更高版本,若版本较低,建议做 兼容处理

代码示例

  1. // API-DEMO page/API/get-title-color/get-title-color.json
  2. {
  3. "defaultTitle": "获取导航栏背景颜色"
  4. }
  1. <!-- API-DEMO page/API/get-title-color/get-title-color.axml-->
  2. <view>
  3. <view class="page-section-demo">
  4. <text>目前导航栏的背景色:
  5. </text>
  6. <input type="text" disabled="{{true}}" value="{{titleColor.color}}">
  7. </input>
  8. </view>
  9. <view class="page-section-btns">
  10. <view onTap="getTitleColor">获取导航栏背景颜色
  11. </view>
  12. </view>
  13. </view>
  1. // API-DEMO page/API/get-title-color/get-title-color.js
  2. Page({
  3. data: {
  4. titleColor: {},
  5. },
  6. getTitleColor() {
  7. my.getTitleColor({
  8. success: (res) => {
  9. this.setData({
  10. titleColor: res
  11. })
  12. }
  13. })
  14. }
  15. });

入参

Object 类型,属性如下:

属性 类型 必填 描述
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

success 回调函数

Object 类型,属性如下:

属性 类型 描述
color HexColor 返回当前导航栏背景色,ARGB 格式的十六进制颜色值,如 #323239FF。

常见问题

  • Q:可以设置小程序右上角 分享与收藏 的颜色吗?
    A:该颜色是默认的,无法设置。

my.hideBackHome

该接口用于隐藏标题栏上的返回首页图标(如下图所示)和右上角通用菜单中的返回首页功能。

版本要求:基础库 1.16.4 或更高版本,若版本较低,建议做 兼容处理

说明
  • 若您在启动小程序时,若进入的页面不是小程序首页,则会在左上角出现返回首页图标。
  • 如果 app.json 中配置了 tabbar 跳转 pages/index/index 时,不会出现 返回首页 功能。

代码示例

  1. //.js
  2. Page({
  3. onReady() {
  4. if (my.canIUse('hideBackHome')) {
  5. my.hideBackHome();
  6. }
  7. },
  8. });
  1. //.js
  2. onLoad(){
  3. my.reLaunch()({
  4. url:'../swiper/swiper'// 在页面中添加的非首页
  5. })
  6. setTimeout(() => {
  7. //5秒后隐藏返回首页按钮
  8. my.hideBackHome()
  9. }, 5000)
  10. }

my.hideNavigationBarLoading

该接口用于在当前页面隐藏导航条的加载动画。

代码示例

  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
  2. {
  3. "defaultTitle": "标题栏加载动画"
  4. }
  1. <!-- API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <button type="primary" onTap="showNavigationBarLoading">显示加载动画</button>
  5. <button onTap="hideNavigationBarLoading">隐藏加载动画</button>
  6. </view>
  7. </view>
  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.js
  2. Page({
  3. showNavigationBarLoading() {
  4. my.showNavigationBarLoading()
  5. },
  6. hideNavigationBarLoading() {
  7. my.hideNavigationBarLoading()
  8. }
  9. })
  1. /* API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.acss */
  2. button + button {
  3. margin-top: 20rpx;
  4. }

my.showNavigationBarLoading

该接口用于在当前页面显示导航条的加载动画。

效果示例

hide&show

代码示例

  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
  2. {
  3. "defaultTitle": "标题栏加载动画"
  4. }
  1. <!-- API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <button type="primary" onTap="showNavigationBarLoading">显示加载动画</button>
  5. <button onTap="hideNavigationBarLoading">隐藏加载动画</button>
  6. </view>
  7. </view>
  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.js
  2. Page({
  3. showNavigationBarLoading() {
  4. my.showNavigationBarLoading()
  5. },
  6. hideNavigationBarLoading() {
  7. my.hideNavigationBarLoading()
  8. }
  9. })
  1. /* API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.acss */
  2. button + button {
  3. margin-top: 20rpx;
  4. }

my.setNavigationBar

该接口用于设置导航栏样式:导航栏标题、导航栏背景色、导航栏底部边框颜色、导航栏左上角 logo 图片。

说明
  • 导航栏左上角 logo 图片支持 gif 格式,必须使用 https 图片链接。
  • 若设置了导航栏背景色 backgroundColor,则导航栏底部边颜色 borderBottomColor 不会生效,默认会和 backgroundColor 颜色一样。
  • 导航栏背景色不支持渐变色。

效果示例

navigation bar

代码示例

  1. // API-DEMO page/API/set-navigation-bar/set-navigation-bar.json
  2. {
  3. "defaultTitle": "设置页面导航栏"
  4. }
  1. <!-- API-DEMO page/API/set-navigation-bar/set-navigation-bar.axml-->
  2. <view class="page">
  3. <view class="page-description">设置导航栏 API</view>
  4. <form onSubmit="setNavigationBar" style="align-self:stretch">
  5. <view class="page-section">
  6. <view class="page-section-demo">
  7. <input class="page-body-form-value" type="text" placeholder="标题" name="title"></input>
  8. <input class="page-body-form-value" type="text" placeholder="导航栏背景色" name="backgroundColor"></input>
  9. <input class="page-body-form-value" type="text" placeholder="导航栏底部边框颜色" name="borderBottomColor"></input>
  10. <input class="page-body-form-value" type="text" placeholder="导航栏图片地址" name="image"></input>
  11. </view>
  12. <view class="page-section-btns">
  13. <button type="primary" size="mini" formType="submit">设置</button>
  14. <button type="primary" size="mini" onTap="resetNavigationBar">重置</button>
  15. </view>
  16. </view>
  17. </form>
  18. <view class="tips">
  19. tips:
  20. <view class="item">1. image:图片链接地址,必须 https,请使用一张3x高清图。若设置了 image,则 title 参数失效</view>
  21. <view class="item">2. backgroundColor: 导航栏背景色,支持 16 进制颜色值</view>
  22. <view class="item">3. borderBottomColor: 导航栏底部边框颜色,支持 16 进制颜色值。若设置了 backgroundColor,borderBottomColor 会不生效,默认会和 backgroundColor 颜色一样。</view>
  23. </view>
  24. </view>
  1. // API-DEMO page/API/set-navigation-bar/set-navigation-bar.js
  2. Page({
  3. setNavigationBar(e) {
  4. var title = e.detail.value.title;
  5. var backgroundColor = e.detail.value.backgroundColor;
  6. var borderBottomColor = e.detail.value.borderBottomColor;
  7. var image = e.detail.value.image;
  8. console.log(title)
  9. my.setNavigationBar({
  10. title,
  11. backgroundColor,
  12. borderBottomColor,
  13. image,
  14. })
  15. },
  16. resetNavigationBar() {
  17. my.setNavigationBar({
  18. reset: true,
  19. title: '重置导航栏样式',
  20. });
  21. }
  22. })
  1. /* API-DEMO page/API/set-navigation-bar/set-navigation-bar.acss */
  2. .page-section-btns {
  3. padding: 26rpx;
  4. }

入参

入参为 Object 类型,属性如下:

属性 类型 必填 描述
title String 导航栏标题。
image String 图片链接地址(支持 gif 格式图片),必须是https,请使用 iOS @3x 分辨率标准的高清图片。若设置了 image 则 title 参数失效。
backgroundColor String 导航栏背景色,支持十六进制颜色值。
borderBottomColor String 导航栏底部边框颜色,支持十六进制颜色值。若设置了 backgroundColor,则 borderBottomColor 不会生效,默认会和 backgroundColor 颜色一样。
reset Boolean 是否重置导航栏为应用默认配色,默认为 false。
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

常见问题

  • Q:可以设置小程序右上角 分享与收藏 的颜色吗?
    A:该颜色是默认的,无法设置。

相关信息

更多关于 iOS @3x 分辨率标准的信息,参见 Image Size and Resolution

导航栏常见问题

  • Q:可以设置小程序右上角 分享与收藏 的颜色吗?
    A:该颜色是默认的,无法设置。

  • Q:小程序胶囊按钮内的菜单页是否可以支持自定义修改?
    1
    A:目前小程序胶囊按钮内的菜单页暂不支持自定义修改。

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