This page is translated by Google Cloud Translation API

Switch to Chinese

navigation-bar

The page navigation bar configuration node is used to specify some attributes of the navigation bar. It can only be the first node in the page-meta component, and it needs to be used together.

Platform difference description

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序
√ 2.6.3+	2.6.3+	√ 2.9.0+	√	√	√	√	√	x

From HBuilderX 2.9.3, navigation-bar is supported on all platforms when compiled, but when compiled to WeChat, it is limited by the version of the basic library of WeChat; compiled to other platforms, it is not limited by the platform version.

Attribute description

property	type	default value	required	description	minimum version
title	string		No	Navigation bar title	WeChat Basic Library 2.9.0
title-icon	string		No	Title icon, icon path such as "./img/t.png", only supports local file path, relative path, relative to the host position of the current page, fixed width and height are logical pixel values "34px". The images are required to be the same width and height. Note: After setting the title icon, the title will be displayed on the left.	App 2.6.7+
title-icon-radius	string	No rounded corners	No	Title icon rounded corners, the value format is "XXpx", where XX is the pixel value (logical pixel), such as "10px" means 10 pixel radius rounded corners.	App 2.6.7+
subtitle-text	string		No	Subtitle text content, after setting the subtitle, two lines of titles will be displayed, and the subtitle will be displayed below the main title (titleText). Note: After setting the subtitle, it will be displayed on the left	App 2.6.7+
subtitle-size	string	"auto"	No	Subtitle text font size, the font size unit is pixels, such as "14px" means the font size is 14 pixels, the default value is 12 pixels.	App 2.6.7+
subtitle-color	string		No	Subtitle text color, the color value format is "#RRGGBB" and "rgba(R,G,B,A)", such as "#FF0000" means the title text color is red. The default value is the same as the main title text color	App 2.6.7+
subtitle-overflow	string	"ellipsis"	No	The processing method when the title text exceeds the display area, the possible values are: "clip" - the content is clipped when it exceeds the display area; ...).	App 2.6.7+
title-align	string	"auto"	No	Available values: "center" - center alignment; "left" - left alignment; "auto" - automatically selected according to the platform (Android platform is left-aligned, iOS platform is center-aligned)	App 2.6.7+
background-image	string		No	The following types are supported: Background image path - such as "./img/t.png", only supports local file path, relative path, relative to the host location of the current page, according to the actual title bar Width and height stretched drawing; Gradient color - only supports linear gradient, two-color gradient, such as "linear-gradient(to top, #a80077, #66ff00)", where the first parameter is the gradient direction, which can take values: "to right" means gradient from left to right, "to left" means gradient from right to left, "to bottom" means gradient from top to bottom, "to top" means gradient from bottom to top, "to bottom right" means gradient From the upper left corner to the lower right corner, "to top left" means from the lower right corner to the upper left corner	App 2.6.7+
background-repeat	string		no	Only valid when backgroundImage is set to image path. Possible values: "repeat" - the background image is tiled vertically and horizontally; "repeat-x" - the background image is tiled horizontally and stretched vertically; "repeat-y" - the background image is flattened vertically Pave, stretch horizontally; "no-repeat" - the background image is stretched both vertically and horizontally. Use "no-repeat" by default	App 2.6.7+
blur-effect	string	"none"	no	This effect will Gaussian blur to show the content behind the title bar, only available when type is "transparent" or "float". Possible values: "dark" - dark style blur, corresponding to iOS native UIBlurEffectStyleDark effect; "extralight" - highlight style blur, corresponding to iOS native UIBlurEffectStyleExtraLight effect; "light" - light style blur, corresponding to iOS native UIBlurEffectStyleLight effect; "none" - No blur effect. Note: Avoid setting the background color when using the blur effect, setting the background color may override the blur effect.	App 2.6.7+
loading	string	false	No	Whether to display the loading prompt in the navigation bar	WeChat Basic Library 2.9.0
front-color	string		No	Navigation bar foreground color value, including button, title, status bar color, only supports #ffffff and #000000	WeChat Basic Library 2.9.0
background-color	string		No	Navigation bar background color value, valid value is hexadecimal color	WeChat Basic Library 2.9.0
color-animation-duration	number	0	No	The animation duration when changing the color of the navigation bar, the default is 0 (that is, no animation effect)	WeChat Basic Library 2.9.0
color-animation-timing-func	string	"linear"	No	The animation mode when changing the color of the navigation bar, supports linear , easeIn , easeOut and easeInOut	WeChat Basic Library 2.9.0

Attribute description /collocation/pages?id=app-titlenview

Notice

• navigation-bar currently supports only the configurations listed in the table above, and does not support all the configurations of the navigation bar in page.json
• When navigation-bar conflicts with the settings of pages.json, the settings of page.json will be overwritten

Sample code

<template>
  <page-meta>
    <navigation-bar
      :title="nbTitle"
      :title-icon="titleIcon"
      :title-icon-radius="titleIconRadius"
      :subtitle-text="subtitleText"
      :subtitle-color="nbFrontColor"
      :loading="nbLoading"
      :front-color="nbFrontColor"
      :background-color="nbBackgroundColor"
      :color-animation-duration="2000"
      color-animation-timing-func="easeIn"
    />
  </page-meta>
  <view class="content"></view>
</template>

<script>
  export default {
    data() {
      return {
        nbTitle: '标题',
        titleIcon: '/static/logo.png',
        titleIconRadius: '20px',
        subtitleText: 'subtitleText',
        nbLoading: false,
        nbFrontColor: '#000000',
        nbBackgroundColor: '#ffffff'
      }
    },
    onLoad() {
    },
    methods: {
    }
  }
</script>