效果图

代码

app.json文件下

"window":{"navigationStyle": "custom" //增加此属性},

app.js文件

//计算高度
App({onLaunch() {wx.getSystemInfo({ // 获取设备信息success: (res) => {this.globalData.systeminfo = res//导航栏let statusBarHeight = res.statusBarHeight // 状态栏高度let headerPosi = wx.getMenuButtonBoundingClientRect()  // 胶囊位置信息let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点height: headerPosi.height,width: headerPosi.width,// 胶囊top - 状态栏高度top: headerPosi.top - statusBarHeight,// 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,// 屏幕宽度 - 胶囊rightright: res.screenWidth - headerPosi.right}// 原胶囊bottom + 现胶囊bottomthis.globalData.navbarHeight = headerPosi.bottom + btnPosi.bottom this.globalData.statusBarHeight = statusBarHeight this.globalData.navbarBtn = btnPosi wx.setStorageSync('navbarHeight', this.globalData.navbarHeight)},})// 获得胶囊按钮位置信息this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()},globalData: {headerBtnPosi: {} ,// 胶囊按钮位置信息navbarHeight: 0,statusBarHeight: 0,navbarBtn: 0}
})

组件文件components文件夹下新增navBar文件
index.js

// components/navBar/index.js
const app = getApp();
Component({/*** 组件的属性列表*/properties: {navbarData: { // 由父页面传递的数据type: Object,value: {position:'true'},observer: function (newVal, oldVal) { }}},/*** 组件的初始数据*/data: {navbarHeight: app.globalData.navbarHeight, // 顶部导航栏高度navbarBtn: app.globalData.navbarBtn,statusBarHeight: app.globalData.statusBarHeight ,// 状态栏高度imgStatus: true},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("nav",this.data.navbarHeight, this.data);let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点height: headerPosi.height,width: headerPosi.width,// 胶囊top - 状态栏高度top: headerPosi.top - statusBarHeight,// 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,// 屏幕宽度 - 胶囊rightright: app.globalData.systeminfo.screenWidth - headerPosi.right}this.setData({navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottomstatusBarHeight: statusBarHeight,navbarBtn: btnPosi,})console.log("nav",this.data.navbarHeight);// this.triggerEvent('updateData',{cardIssuersCode:this.data.navbarHeight})console.log("navbarHeight",this.data.navbarHeight)console.log("navbarBtn-top",this.data.navbarBtn.height)console.log("navbarBtn-height",this.data.navbarBtn.top)console.log('jksjdfkjkfsf')},lifetimes: {attached: function(options) {// 在组件实例进入页面节点树时执行}},/*** 组件的方法列表*/methods: {_goBack: function () {let pages = getCurrentPages();if(pages.length==1) {wx.switchTab({url: '/pages/index/index',});return;}wx.navigateBack({delta: 1});}}
})

index.wxss

.container {width: 100%;height: 100px;z-index: 1000;
}
.navBar {display: flex;align-items: flex-start;justify-content: center;width: 100%;
}
.navBar .navImg {position: absolute;left: 33rpx;display: flex;align-items: center;z-index: 10;
}
.navBar .navImg .img {width: 50rpx;height: 50rpx;
}
.navBar text {font-size: 35rpx;
}
.textTitle {font-weight: bold;
}
.navBarPosition {width: 100%;height: 100px;position: fixed;z-index: 1000;
}
.img {width: 100%;height: 100%;object-fit: cover;
}
.textColor {color: white;position: absolute;width: 672rpx;text-align: center;font-weight: bold;
}
.navText {position: absolute;width: 672rpx;text-align: center;font-weight: bold;
}

index.wxml

<view class="navBar {{navbarData.position?'navBarPosition':''}}" style="height: {{navbarHeight}}px;"><view class="navImg" style='margin-top: {{statusBarHeight}}px;top: 18rpx' >//左箭头图标自己更换本地文件<image src="/assets/images/make/back.png" bindtap="_goBack" wx:if="{{imgStatus}}" class="img"></image><image src="http://res.ctmus.cn/festival-h5.v19/resource/2022/11/29/580c1edc-cb7d-4726-b3bc-aabdc397820b.png" bindtap="_goBack" style="width: 40rpx; height: 40rpx;" wx:else=""></image></view><view  style='line-height:{{navbarBtn.height + navbarBtn.top}}px;margin-top: {{statusBarHeight}}px; top: 8rpx' class="{{imgStatus ? 'navText' : 'textColor'}}" ><text class="textTitle">{{navbarData.title }}</text></view><!-- <view style="background-color: pink; height: 500rpx;"></view> -->
</view>

使用

<navBar navbarData="{{navbarData}}"></navBar>

js

Page({data: {navbarData: {// 是否显示左上角胶囊按钮 1 显示 0 不显示title: '选择视频模板' // 导航栏 中间的标题},},})