- uni-app custom navigation bar
- uni-app custom navigation bar steps
- uni-app custom navigation bar example
- uni-app custom system navigation bar
uni-app custom navigation bar
uni-app custom navigation bar steps
In uni-app, you can customize the navigation bar effect by modifying the navigation bar configuration of the page. Here are the general steps for implementing a custom navigation bar:
-
Find the page that requires a customized navigation bar in the uni-app project, such as
pages/index/index.vue
. -
In the
tag of the page, add a custom navigation bar component, such as
. -
In the
tag, define the
component and add the necessary properties and methods in it. You can use
and other basic components to build the layout of the navigation bar. -
In the
onLoad
ormounted
life cycle hook, set the title of the navigation bar through theuni.setNavigationBarTitle()
method. You can get the header information from the page data or from the component's properties. -
If you need to hide the system's native navigation bar, you can hide it through the
uni.hideNavigationBar()
method. Please note that this may result in changes to the page layout and will need to be adjusted accordingly. -
As needed, you can add other function buttons or style settings to the navigation bar component, such as return buttons, search boxes, etc.
Please note that the above steps are a common implementation, and the specific implementation still depends on your project needs and design. You can develop more detailed custom navigation bars based on uni-app's documentation and sample code, combined with your own actual scenarios.
In addition, uni-app also provides some plug-in and component libraries, such as uni-ui and uView UI, which also provide options and styles for customizing the navigation bar. You can choose a suitable component library for development according to your own needs.
For more details, please search “front-end enthusiast
” on WeChat and click me to view.
uni-app custom navigation bar example
Here is an example showing how to customize the navigation bar in uni-app:
- Define a custom navigation bar component
in thepages/index/index.vue
page, and set related properties and styles:
<template> <view class="custom-navigation-bar"> <view class="left-button" @click="handleBack"> return </view> <view class="title"> {<!-- -->{ title }} </view> <view class="right-button"> More </view> </view> </template> <script> export default { props: { title: { type: String, default: 'Home' } }, methods: { handleBack() { uni.navigateBack() } } } </script> <style> .custom-navigation-bar { display: flex; align-items: center; justify-content: space-between; height: 44px; } .left-button, .right-button { padding: 0 12px; } .title { flex: 1; text-align: center; font-size: 18px; font-weight: bold; } </style>
- Use the custom navigation bar component in
pages/index/index.vue
and set the corresponding title:
<template> <view class="container"> <custom-navigation-bar title="Home"></custom-navigation-bar> <!-- Page content --> </view> </template> <script> export default { //Page configuration } </script> <style> .container { padding-top: 44px; } </style>
In this example, we create a custom navigation bar component
that contains a back button, title, and more buttons. Use this component in the page and set the title of the navigation bar through the title
attribute.
Please make corresponding style adjustments and functional expansions according to your own project needs and design. This is just a simple example, you can develop a custom navigation bar based on your actual situation.
uni-app custom system navigation bar
The navigation bar of native uniapp
cannot meet the needs of UI, so various information can be accessed and the navigation bar can be customized.
It is organized as follows:
pages.json
Modify pages.json
, enable navigation bar adaptation, and set "navigationStyle": "custom"
{<!-- --> "pages": [ {<!-- --> "path": "pages/index/index", "style": {<!-- --> "navigationBarTitleText": "index", "navigationStyle": "custom" } } ], "globalStyle": {<!-- --> "navigationBarTextStyle": "black", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "app-plus": {<!-- --> "background": "#efeff4" } } }
system_info.js
New system_info.js
is used to obtain the model system information of the current device.
/** * This js file manages model system information about the current device */ const systemInfo = function() {<!-- --> /****************** System information common to all platforms ************************/ //Device system information let systemInfomations = uni.getSystemInfoSync() //Model adaptation proportion coefficient let scaleFactor = 750 / systemInfomations.windowWidth //Current model-screen height let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx //Current model-screen width let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx //Status bar height let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx // Navigation bar height Note: This navigation bar height is only valid for WeChat applet. For other platforms, if you want to customize the navigation bar, please use: status bar height + custom text height let navHeight = 0 //rpx // console.log(windowHeight,'Hahahahaha'); \t /****************** WeChat Mini Program Head Capsule Information ********************/ // #ifdef MP-WEIXIN const menuButtonInfo = wx.getMenuButtonBoundingClientRect() //Capsule height let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx // Capsule width let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx //Coordinates of the upper boundary of the capsule let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx //Coordinates of the right boundary of the capsule let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx //Coordinates of the lower boundary of the capsule let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx //Coordinates of the left boundary of the capsule let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx // Navigation bar height in WeChat applet = capsule height + (top distance - status bar height) * 2 navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2 // #endif // #ifdef MP-WEIXIN return {<!-- --> scaleFactor, windowHeight, windowWidth, statusBarHeight, menuButtonHeight, menuButtonWidth, menuButtonTop, menuButtonRight, menuButtonBottom, menuButtonLeft, navHeight } // #endif // #ifndef MP-WEIXIN return {<!-- --> scaleFactor, windowHeight, windowWidth, statusBarHeight } // #endif } export {<!-- --> systemInfo }
HeadNav.vue
New component HeadNav.vue
, this is a custom system navigation bar.
/* * Notice: * 1. When passing in width or height, if it is Number data, the value passed in is the px size. There is no need to bring the unit, and the component automatically calculates it. * 2. When using this navigation bar, it is recommended to pass in the navigation bar height specified by the UI. This height is only valid for other platforms except WeChat applet. The navigation bar height of WeChat applet is calculated by the component itself. */ <template> <view :style="{height:navHeight + 'rpx'}"> <!-- WeChat applet head navigation bar --> <!-- #ifdef MP-WEIXIN --> <view class="wx-head-mod" :style="{height:navHeight + 'rpx',backgroundColor:navBackgroundColor}"> <view class="wx-head-mod-nav" :style="{height:navigationBarHeight + 'rpx',top:statusBarHeight + 'rpx'}"> <view class="wx-head-mod-nav-content" :style="{height:customHeight + 'rpx',justifyContent:textAlign === 'center'?'center':'left'}"> <!-- Text area --> <view class="wx-head-mod-nav-content-mian" :style="{width:navTextWidth,lineHeight:customHeight + 'rpx',paddingLeft:textPaddingLeft*scaleFactor + 'rpx',fontSize:fontSize*scaleFactor + 'rpx',fontWeight:fontWeight,color:titleColor}"> {<!-- -->{textContent}} </view> <!-- Back button --> <view class="wx-head-mod-nav-content-back" :style="{display:isBackShow?'flex':'none'}" @click="backEvent"> <view class="wx-head-mod-nav-content-back-img" :style="{width:backImageWidth*scaleFactor + 'rpx',height:backImageHeight*scaleFactor + 'rpx'}"> <image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image> </view> </view> </view> </view> </view> <!-- #endif --> <!-- Other devices except WeChat applet --> <!-- #ifndef MP-WEIXIN --> <view class="other-head-mod" :style="{height:navHeightValue*scaleFactor + statusBarHeight + 'rpx',backgroundColor:navBackgroundColor}"> <view class="other-head-mod-mian" :style="{height:navHeightValue*scaleFactor + 'rpx',justifyContent:textAlign === 'center'?'center':'left'}"> <!-- Back button --> <view class="other-head-mod-mian-back" v-show="isBackShow" @click="backEvent"> <view class="other-head-mod-mian-back-img" :style="{width:backImageWidth*scaleFactor + 'rpx',height:backImageHeight*scaleFactor + 'rpx'}"> <image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image> </view> </view> <!-- Title --> <view class="other-head-mod-mian-title" :style="{width:windowWidth - 184 + 'rpx',lineHeight:navHeightValue*scaleFactor + 'rpx', paddingLeft:textPaddingLeft*scaleFactor + 'rpx',fontSize:fontSize*scaleFactor + 'rpx', fontWeight:fontWeight,color:titleColor}"> {<!-- -->{textContent}} </view> </view> </view> <!-- #endif --> </view> </template> <script> const app = getApp() import {<!-- -->systemInfo} from '@/pages/v2/acommon_js/system_info.js' export default {<!-- --> name: "HeadView", props: {<!-- --> // Text area position left: left center: center textAlign: {<!-- --> type: String, default: 'center' }, //Text area content textContent: {<!-- --> type: String, default: 'Hahahahahahahahahahahahahahahahahaha it's easy to borrow and return' }, //The distance of the text area from the left textPaddingLeft: {<!-- --> type: Number, default: 16 }, // Do you need a return button? isBackShow: {<!-- --> type: Boolean, default: true }, // Text area font size fontSize: {<!-- --> type: Number, default: 20 //px }, // Text area font thickness fontWeight: {<!-- --> type: Number, default: 700 }, // Text area return button image width backImageWidth: {<!-- --> type: Number, default: 12 //px }, // Text area return button image height backImageHeight: {<!-- --> type: Number, default: 24 //px }, // Return button icon path backImageUrl: {<!-- --> type: String, default: '/static/v2/aichat/ai_robot.png' }, //The overall background color of the navigation bar navBackgroundColor: {<!-- --> type: String, default: '#2476F9' }, //Title font color titleColor: {<!-- --> type: String, default: '#ffffff', }, /******** h5 side, the app side needs to pass in the custom navigation bar height *******/ navHeightValue: {<!-- --> type: Number, default: 44 //px } }, computed: {<!-- --> // Text area width navTextWidth() {<!-- --> if (this.textAlign === 'center') {<!-- --> return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) + 'rpx' } else {<!-- --> return this.menubarLeft + 'rpx' } }, // text area paddingLeft textPaddingleft() {<!-- --> if (this.textAlign === 'center') {<!-- --> return '0' } else {<!-- --> return this.textPaddingLeft + 'rpx' } } }, data() {<!-- --> return {<!-- --> statusBarHeight: app.globalData.statusBarHeight, //status bar height navHeight: app.globalData.navHeight, //The overall height of the head navigation bar navigationBarHeight: app.globalData.navigationBarHeight, //Navigation bar height customHeight: app.globalData.customHeight, //Capsule height scaleFactor: app.globalData.scaleFactor, //scale factor menubarLeft: app.globalData.menubarLeft, //left of capsule positioning windowWidth: app.globalData.windowWidth * app.globalData.scaleFactor }; }, methods: {<!-- --> backEvent() {<!-- --> uni.navigateBack({<!-- --> delta: 1 }) } }, created() {<!-- --> /* Get device information */ const SystemInfomations = systemInfo() /* Common platform */ this.statusBarHeight = SystemInfomations.statusBarHeight //Status bar height this.scaleFactor = SystemInfomations.scaleFactor //Scale factor this.windowWidth = SystemInfomations.windowWidth //The screen width of the current device /* WeChat mini program platform */ // #ifdef MP-WEIXIN this.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //The total height of the head navigation bar this.navigationBarHeight = SystemInfomations.navHeight //Height of the head navigation bar this.customHeight = SystemInfomations.menuButtonHeight //Capsule height this.menubarLeft = SystemInfomations.menuButtonLeft //The distance between the left border of the capsule and the upper left corner // #endif \t\t\t console.log("this.navHeight:", this.navHeight) } } </script> <style> /* #ifdef MP-WEIXIN */ .wx-head-mod {<!-- --> box-sizing: border-box; width: 100%; position: fixed; top: 0; left: 0; } .wx-head-mod-nav {<!-- --> box-sizing: border-box; width: 100%; position: absolute; left: 0; display: flex; justify-content: center; align-items: center; } .wx-head-mod-nav-content {<!-- --> box-sizing: border-box; width: 100%; display: flex; justify-content: left; align-items: center; position: relative; } /* text area */ .wx-head-mod-nav-content-mian {<!-- --> box-sizing: border-box; height: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* Back button */ .wx-head-mod-nav-content-back {<!-- --> box-sizing: border-box; width: 60rpx; height: 100%; /* background-color: aqua; */ position: absolute; top: 0; left: 32rpx; display: flex; align-items: center; justify-content: left; } .wx-head-mod-nav-content-back-img {<!-- --> box-sizing: border-box; } /* #endif */ /* #ifndef MP-WEIXIN */ .other-head-mod {<!-- --> box-sizing: border-box; width: 100%; position: fixed; top: 0; left: 0; } .other-head-mod-mian {<!-- --> box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: left; position: absolute; left: 0; bottom: 0; } /* Back button */ .other-head-mod-mian-back {<!-- --> box-sizing: border-box; height: 100%; width: 60rpx; position: absolute; left: 32rpx; top: 0; display: flex; align-items: center; } /* title */ .other-head-mod-mian-title {<!-- --> box-sizing: border-box; height: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* #endif */ </style>
index.vue
Modify the components to customize the navigation bar
<template> <view style="height: 100%;"> <head-nav :style="navStyle"></head-nav> <view class="container" :style="containerStyle"> <scroll-view :scroll-top="scrollTop" class="chat-container" :scroll-into-view="scrollintoid" scroll-y="true" @scroll="handleScroll" @scrolltolower="handleScrollToLower"> Omit intermediate layout content </scroll-view> </view> </view> </template> <script> import HeadNav from '@/pages/v2/components/HeadNav.vue' import {<!-- -->systemInfo} from '@/pages/v2/acommon_js/system_info.js' export default {<!-- --> components: {<!-- --> MarkdownViewer, HeadNav }, data() {<!-- --> return {<!-- --> // Omit some variables containerStyle: "", navStyle: "" }; }, onReady() {<!-- --> //-------------------------- Classic interface customization, need to record-------------- ----------------------------------------------- //Device system information let systemInfomations_ = uni.getSystemInfoSync() //Model adaptation proportion coefficient let scaleFactor_ = 750 / systemInfomations_.windowWidth //Current model-screen height let windowHeight_ = systemInfomations_.windowHeight * scaleFactor_ //rpx \t\t\t /* Get device information */ const SystemInfomations = systemInfo() /* Common platform */ const statusBarHeight = SystemInfomations.statusBarHeight //Status bar height const scaleFactor = SystemInfomations.scaleFactor //Scale coefficient const windowWidth = SystemInfomations.windowWidth //The screen width of the current device /* WeChat mini program platform */ // #ifdef MP-WEIXIN const navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //The total height of the head navigation bar const navigationBarHeight = SystemInfomations.navHeight //Height of head navigation bar const customHeight = SystemInfomations.menuButtonHeight //Capsule height const menubarLeft = SystemInfomations.menuButtonLeft //The distance between the left border of the capsule and the upper left corner this.containerStyle = ' height:' + (systemInfomations_.windowHeight - statusBarHeight - 10) + 'px;'; // #endif \t\t\t console.log("this.viewHight:", this.viewHeight) \t\t\t /* Common platform */ // #ifndef MP-WEIXIN this.containerStyle = 'height:' + (systemInfomations_.windowHeight - 54) + 'px;'; this.navStyle = 'height:' + 44 + 'px'; // #endif //------------------------------------------------ --------------------------------------- } } </script>