All Products
Search
Document Center

Navigation bar

Last Updated: Feb 05, 2021

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

 
  1. // API-DEMO page/API/get-title-color/get-title-color.json
  2. {
  3. "defaultTitle": "Obtain navigation bar background color"
  4. }
 
  1. <!-- API-DEMO page/API/get-title-color/get-title-color.axml-->
  2. <view>
  3. <view class="page-section-demo">
  4. <text>Current background color of the navigation bar:
  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">Obtain navigation bar background color
  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. });

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.

Notes
  • 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

 
  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'// An added page other than the homepage
  5. })
  6. setTimeout(() => {
  7. //Hide the home button after 5 seconds
  8. my.hideBackHome()
  9. }, 5000)
  10. }

my.hideNavigationBarLoading

Use this API to hide the navigation bar loading.

Code sample

 
  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
  2. {
  3. "defaultTitle": "Loading animation in title bar"
  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">Show loading animation</button>
  5. <button onTap="hideNavigationBarLoading">Hide loading animation</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

Use this API to show the navigation bar loading.

Example

hide&show

Code sample

 
  1. // API-DEMO page/API/navigation-bar-loading/navigation-bar-loading.json
  2. {
  3. "defaultTitle": "Loading animation in title bar"
  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">Show loading animation</button>
  5. <button onTap="hideNavigationBarLoading">Hide loading animation</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

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.

Example

navigation bar

Code sample

 
  1. // API-DEMO page/API/set-navigation-bar/set-navigation-bar.json
  2. {
  3. "defaultTitle": "Set page navigation bar"
  4. }
 
  1. <!-- API-DEMO page/API/set-navigation-bar/set-navigation-bar.axml-->
  2. <view class="page">
  3. <view class="page-description">Set navigation bar 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="Title" name="title"></input>
  8. <input class="page-body-form-value" type="text" placeholder="Navigation bar background color" name="backgroundColor"></input>
  9. <input class="page-body-form-value" type="text" placeholder="Navigation bar bottom border color" name="borderBottomColor"></input>
  10. <input class="page-body-form-value" type="text" placeholder="Navigation bar image address" name="image"></input>
  11. </view>
  12. <view class="page-section-btns">
  13. <button type="primary" size="mini" formType="submit">Set</button>
  14. <button type="primary" size="mini" onTap="resetNavigationBar">Reset</button>
  15. </view>
  16. </view>
  17. </form>
  18. <view class="tips">
  19. tips:
  20. <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>
  21. <view class="item">2. backgroundColor: Navigation bar background color, support hexadecimal color value.</view>
  22. <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>
  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: 'Reset navigation bar style',
  20. });
  21. }
  22. })
 
  1. /* API-DEMO page/API/set-navigation-bar/set-navigation-bar.acss */
  2. .page-section-btns {
  3. padding: 26rpx;
  4. }

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.

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?
    1
    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