以下是我自己写的一个标题导航栏模板，较为简陋，需要什么属性可自行添加。
HTML部分
<template><div class="comp-navbar"><!-- 占位栏 --><div class="placeholder-bar" :style="{height: holderBarHeight + 'px'}"> </div><!-- 导航栏主体 --><div class="navbar" :style="{height: navBarHeight + 'px',backgroundColor:bg}"><!-- 状态栏 --><div class="nav-statusbar" :style="{height: statusBarHeight + 'px',background:navBackgroundColor1}"></div><!-- 标题栏 --><div class="nav-titlebar" :style="{height: titleBarHeight + 'px',backgroundColor:navBackgroundColor2}"><!-- 后退键 --><div v-if="backVisible" :style="{height:rectHeight+'px' }" class="opt-back" @click="backClick()"><img class="back-image" src="/static/images/back.png"></div><!-- 标题 --><div class="bar-title" :style="[{color:titleColor,fontSize:titleSize+'px',lineHeight:rectHeight+5+'px'}]">{{title}}</div></div></div></div></template>
javascript部分
<script>export default {data(){return {holderBarHeight:20,//占位符高度statusBarHeight:20,//状态栏高度titleBarHeight:46,//标题栏高度navBarHeight:66,//导航栏主体高度rectHeight:40,bg:'transparent',}},beforeMount() {const self = this;wx.getSystemInfo({success(system) {// console.log(`system:`, system);self.statusBarHeight = system.statusBarHeight;// console.log(self.hasTitlebar)self.platform = system.platform;let platformReg = /ios/i;if (platformReg.test(system.platform)) {self.titleBarHeight = 44;} else {self.titleBarHeight = 48;}self.navBarHeight = self.statusBarHeight + self.titleBarHeight;if(self.hasTitlebar){self.holderBarHeight=self.navBarHeight;self.bg='#0b3299'}else if(!self.hasTitlebar){self.holderBarHeight=self.statusBarHeight;self.bg='transparent';}}});// 获取胶囊数据var rect=wx.getMenuButtonBoundingClientRect()// console.log(rect)self.rectHeight=rect.height+rect.top-self.statusBarHeight},methods:{backClick(){// console.log("back")wx.navigateBack({delta:1})},},props:["hasTitlebar",//是否有标题栏"navBackgroundColor1",//状态栏背景颜色"navBackgroundColor2",//标题栏背景颜色"titleColor","titleSize","title","backVisible",//是否有返回按钮]}</script>
CSS部分
<style lang="less" scoped>.comp-navbar {width: 100vw;.navbar {position: fixed;left: 0;top: 0;width: 100%;z-index: 9999999;.nav-titlebar {// border: 1px solid green;width: 100%;display: flex;// align-items: center;justify-content: center;position: relative;.opt-back{position: absolute;left: 0px;top: 0px;display: flex;justify-content: center;align-items: center;width: 32px;height: 40px;.back-image{width: 16px;height: 16px;}}.bar-title {width: 45%;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;}}}.placeholder-bar{background-color: transparent;width: 100%;}}</style>
