WU-UINavbar
This component is generally used in special cases, and it is not used when a custom navigation bar is required. It is generally recommended to use the navigation bar with uni-app.
platform compatibility
| App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
Basic usage
By default, this component only has a left arrow, click to return to the previous page, if you don't want to use the left content, you can manually hide it by setting showLeft to false.
- If you want to customize the word "return" on the right side of the return arrow, you can set
left-textto "return" - Pass in the title to be displayed through the
titleparameter, set the width of the title area throughtitle-width(rpx), if the text exceeds it, it will be hidden by an ellipsis - Configure whether to fix the navigation bar at the top via
fixed
Description
- In the applet, the navigation bar will reserve the capsule position on the right side of the navigation bar through the
mpRightReserveCapsule(default is true) property, avoiding this area. - There is a border at the bottom of the component by default, if you don't need it, you can set the border to false
<template>
<view>
<!-- Support autoBack, the default is false -->
<wu-navbar
title="personal center"
@rightClick="rightClick"
:autoBack="true"
>
</wu-navbar>
</view>
</template>
<script>
methods:{
rightClick() {
console.log('rightClick');
},
leftClick() {
console.log('leftClick');
}
}
</script><template>
<view>
<!-- Support autoBack, the default is false -->
<wu-navbar
title="personal center"
@rightClick="rightClick"
:autoBack="true"
>
</wu-navbar>
</view>
</template>
<script>
methods:{
rightClick() {
console.log('rightClick');
},
leftClick() {
console.log('leftClick');
}
}
</script>Precautions
Since you want to customize the navigation bar, you must first cancel the navigation bar that comes with the system. You need to set it in "pages.json" in the root directory of the uni-app target, and set the color of the status bar font here (H5 is invalid) , After customizing the navigation bar, if you want to dynamically set the color-related parameters of the navigation bar through "uni.setNavigationBarColor", it may cause problems, please do not use this method.
// pages.json
"pages": [
// navbar - custom navigation bar
{
"path": "/pages/navbar/index",
"style": {
"navigationStyle": "custom" ,// Hide system navigation bar
"navigationBarTextStyle": "white" // The font of the status bar is white, and it can only be white-white or black-black.
}
}
]// pages.json
"pages": [
// navbar - custom navigation bar
{
"path": "/pages/navbar/index",
"style": {
"navigationStyle": "custom" ,// Hide system navigation bar
"navigationBarTextStyle": "white" // The font of the status bar is white, and it can only be white-white or black-black.
}
}
]Navigation bar height
The height of the navigation bar can be configured through height (unit px, default 44, consistent with the height of the uni-app system navigation bar), this height is the height of the content of the navigation bar, excluding the height of the status bar, inside the component The height of the status bar will be added automatically, and the occupied area of the status bar will be filled.
Customize the content of the navigation bar
Content passed in by custom slot
<template>
<view>
<wu-navbar
leftText="return"
title="personal center"
:safeAreaInsetTop="false"
>
<template #left>
<view class="wu-nav-slot">
<wu-icon
name="arrow-left"
size="19"
></wu-icon>
<wu-line
direction="column"
:hairline="false"
length="16"
margin="0 8px"
></wu-line>
<wu-icon
name="home"
size="20"
></wu-icon>
</view>
</template>
</wu-navbar>
</view>
</template><template>
<view>
<wu-navbar
leftText="return"
title="personal center"
:safeAreaInsetTop="false"
>
<template #left>
<view class="wu-nav-slot">
<wu-icon
name="arrow-left"
size="19"
></wu-icon>
<wu-line
direction="column"
:hairline="false"
length="16"
margin="0 8px"
></wu-line>
<wu-icon
name="home"
size="20"
></wu-icon>
</view>
</template>
</wu-navbar>
</view>
</template>Customize the background color of the navigation bar
wu-ui provides a bgColor parameter to customize the background color of the navigation bar:
- Gradient
- transparent color
- normal color
<template>
<view>
<wu-navbar title="" :bgColor="bgColor"></wu-navbar>
<view class="content">
<!-- Text content -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgColor: 'linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))',
}
}
}
</script><template>
<view>
<wu-navbar title="" :bgColor="bgColor"></wu-navbar>
<view class="content">
<!-- Text content -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgColor: 'linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))',
}
}
}
</script>API
Navbar Props
| property name | description | type | default value | optional values |
|---|---|---|---|---|
| safeAreaInsetTop | Whether to enable top safe area adaptation | Boolean | true | true / false |
| placeholder | When pinned to the top, whether to generate an equal height element to prevent collapse | Boolean | false | true / false |
| fixed | Whether the navigation bar is fixed at the top | Boolean | true | true / false |
| border | Whether to display a border at the bottom of the navigation bar | Boolean | false | true / false |
| showLeft | Whether to show the left | Boolean | true | true / false |
| mpRightReserveCapsule | Whether to reserve a capsule position on the right side of the navigation bar of the applet | Boolean | true | true / false |
| autoBack | Click the left area (back icon), whether to automatically return to the previous page | Boolean | false | true / false |
| leftIcon | The name of the icon returned on the left, only the icon that comes with wu-ui | String | arrow-left | - |
| leftText | left tooltip text | String | - | - |
| rightIcon | The name of the icon returned on the right side, which can only be the icon that comes with wu-ui | String | - | - |
| rightText | the prompt text on the right side | String | - | - |
| title | navigation bar title, if it is set to an empty character, it will hide the title occupying area | String | - | - |
| bgColor | Navigation bar background setting | String | #ffffff | - |
| titleWidth | The maximum width of the title of the navigation bar, if the content exceeds it, it will be hidden with an ellipsis, unit rpx | String / Number | 400rpx | - |
| height | The height of the navigation bar (not including the height of the status bar, automatically added internally), in px | String / Number | 44px | - |
| leftIconSize | Left icon size | String / Number | 20px | - |
| leftIconColor | The color of left icon returned | String | #303133 | - |
| titleStyle | style of title, object or string | String / Object | - | - |
| customStyle | Define the external style that needs to be used | String / Object | - | - |
Navbar Event
| method name | description | callback parameters |
|---|---|---|
| leftClick | Click on the left area | - |
| rightClick | Click on the right area | - |
Navbar Slot
| Name | Description |
|---|---|
| left | Customize the content on the left side |
| right | Customize part of the content on the right |
| center | Customize the middle content |