1、首先可以在全局配置 所有的页面 navigationStyle: custom ,此时所有的页面都不会显示navBar ;也可以 给指定的页面使用自定义导航栏;
2、给自定义导航栏添加自适应高度
<template> <view class="navBar" :style="{height: navBarHeight+ 'px'}"> <!-- #ifdef H5 --> <view class="left-btn" @click="$router.go(-1)"> < </view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view class="left-btn" @tap="back()"> <image class="icon" src="../static/img/left_arrow.png" mode=""></image> </view> <!-- #endif --> <view class="title"> {{title}} </view> <view class="right-btn"> <slot name="rightBtn"></slot> </view> </view> </template> <script> export default { name:"navBar", props:{ title:{ type:String, default:"title" } }, data() { return { navBarHeight:40 }; }, mounted(){ // #ifdef MP-WEIXIN
let btnInfo = wx.getMenuButtonBoundingClientRect() this.navBarHeight = (2 * btnInfo.top)+ btnInfo.height; // #endif }, methods:{ back(){ uni.navigateBack({ delta:1 }) } } } </script> <style scoped> .icon { width: 20px; height: 20px; } .navBar { display: flex; padding: .1rem .2rem; align-items: center; justify-content: space-between; color: #fff; background: #007AFF; } </style>
这里的 wx.getMenuButtonBoundingClientRect() 可以获取小程序胶囊位置的详细信息,根据胶囊的位置来设置 navBar 的高度