All Products
Search
Document Center

Mobile Platform as a Service:Navigation bar

Last Updated:Jul 17, 2023

my.getTitleColor

Use this API to obtain the background color of the navigation bar.

Version requirement: This interface is supported since basic library version 1.13.0. Compatibility processing is required for earlier versions. See Mini Program base library to learn more.

Code sample

// API-DEMO page/API/get-title-color/get-title-color.json
{
    "defaultTitle": "Obtain navigation bar background color"
}
<!-- API-DEMO page/API/get-title-color/get-title-color.axml-->
<view>
  <view class="page-section-demo">
    <text>Current background color of the navigation bar:
    </text>
    <input type="text" disabled="{{true}}" value="{{titleColor.color}}">
    </input>
  </view>
  <view class="page-section-btns">
    <view onTap="getTitleColor">Obtain navigation bar background color
    </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
        })
      }
    })
  }
});

Input parameters

The input parameters are of Object type, and the attributes are as follows:

Attribute

Type

Required

Description

success

Function

No

Callback function for successful call.

fail

Function

No

Callback function for failed call.

complete

Function

No

Callback function for ended call (executed regardless of whether the call is successful or failed).

Success callback function

Object type, the attributes are as follows:

Attribute

Type

Description

color

HexColor

Returns the background color of the current navigation bar, it is a hexadecimal color value in ARGB format, such as #323239FF.

FAQ

  • Q: Can I set the color of Share and Favorite in the upper right corner of the mini program?

    A: This color is by default and cannot be set.

my.hideBackHome

Use this API to hide the home button in the top navigation bar, and the return-home option in the tab bar in the upper right corner.

Version requirement: This interface is supported since basic library version 1.16.4. Compatibility processing is required for earlier versions. See Mini Program base library to learn more.

Note
  • By default, the home button is displayed if the page where an user enters on starting the Mini Program is not the homepage.

  • If the tab bar is configured to redirect to pages/index/index in the app.json, the Return-home option is not displayed.

Code sample

//.js
Page({
  onReady() {
    if (my.canIUse('hideBackHome')) {
      my.hideBackHome();
    }
  },
});
//.js
onLoad(){
    my.reLaunch()({
    url:'../swiper/swiper'// An added page other than the homepage
  })

  setTimeout(() => {
    //Hide the home button after 5 seconds
    my.hideBackHome()
  }, 5000)
}

my.hideNavigationBarLoading

Use this API to hide the navigation bar loading.

Code sample

// API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
{
    "defaultTitle": "Loading animation in title bar"
}
<!-- API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="showNavigationBarLoading">Show loading animation</button>
    <button onTap="hideNavigationBarLoading">Hide loading animation</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

Use this API to show the navigation bar loading.

Code sample

// API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
{
    "defaultTitle": "Loading animation in title bar"
}
<!-- API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="showNavigationBarLoading">Show loading animation</button>
    <button onTap="hideNavigationBarLoading">Hide loading animation</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

Use this API to set the navigation bar style: navigation bar title, navigation bar background color, bottom border color of navigation bar, logo image at the upper left corner of navigation bar.

Note
  • The logo image in the upper left corner of the navigation bar supports the .gif format and must be an HTTPS link.

  • If the navigation bar background color backgroundColor is set, the borderBottomColor at the bottom of the navigation bar will not take effect, and the color will be the same as backgroundColor by default.

  • The background color of the navigation bar does not support gradient colors.

Code sample

// API-DEMO page/API/set-navigation-bar/set-navigation-bar.json
{
    "defaultTitle": "Set page navigation bar"
}
<!-- API-DEMO page/API/set-navigation-bar/set-navigation-bar.axml-->
<view class="page">
  <view class="page-description">Set navigation bar 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="Title" name="title"></input>
        <input class="page-body-form-value" type="text" placeholder="Navigation bar background color" name="backgroundColor"></input>
        <input class="page-body-form-value" type="text" placeholder="Navigation bar bottom border color" name="borderBottomColor"></input>
        <input class="page-body-form-value" type="text" placeholder="Navigation bar image address" name="image"></input>
      </view>
      <view class="page-section-btns">
        <button type="primary" size="mini" formType="submit">Set</button>
        <button type="primary" size="mini" onTap="resetNavigationBar">Reset</button>
      </view>
    </view>
  </form>
  <view class="tips">
    tips:
   <view class="item">1. image: The image link address, which must be an HTTPS address. Please use a 3x HD image. If an image is set, the title parameter is invalid.</view>
   <view class="item">2. backgroundColor: Navigation bar background color, support hexadecimal color value.</view>
   <view class="item">3. borderBottomColor: The color of the bottom border of the navigation bar, which supports hexadecimal color value. If the backgroundColor is set, borderBottomColor will not take effect, and the color be the same as backgroundColor by default.</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: 'Reset navigation bar style',
    });
  }
})
/* API-DEMO page/API/set-navigation-bar/set-navigation-bar.acss */
.page-section-btns {
  padding: 26rpx;
}

Input parameters

The input parameters are of Object type, and the attributes are as follows:

Attribute

Type

Required

Description

title

String

No

Navigation bar title.

image

String

No

The image link address (.gif format supported), which must be an HTTPS address. Please use iOS @3x HD image. If an image is set, the title parameter is invalid.

backgroundColor

String

No

The background color of navigation bar, which supports hexadecimal color value.

borderBottomColor

String

No

The bottom border color of navigation bar, which supports hexadecimal color value. If backgroundColor is set, borderBottomColor will not take effect, and the color will be the same as the backgroundColor color by default.

reset

Boolean

No

Whether to reset the color of navigation bar to the default color, the value is false by default.

success

Function

No

Callback function for successful call.

fail

Function

No

Callback function for failed call.

complete

Function

No

Callback function for ended call (executed regardless of whether the call is successful or failed).

FAQ

  • Q: Can I set the color of Share and Favorite in the upper right corner of the mini program?

    A: This color is by default and cannot be set.

Related Information

For more information about iOS @3x resolution standards, see Image Size and Resolution.

Navigation Bar FAQ

  • Q: Can I set the color of Share and Favorite in the upper right corner of the mini program?

    A: This color is by default and cannot be set.

  • Q: Can I change the menu page in the mini program capsule button?

    A: Currently, the menu page in the mini program capsule button does not support custom modification.

  • Q: Can I change the font color of the navigation bar?

    A: The font color of the navigation bar cannot be customized and modified, but you can modify the background color to make it automatically adjust the font color of the navigation bar to black or white