uniapp 开发微信小程序自定义与胶囊平行的导航栏,并添加背景图

1、page.json中使用custom自定义导航栏

{
"path": "pages/partners/index",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom" //自定义导航栏样式
}
},

2、vue文件：

<template>
<view class="container">

<image src="../../static/commonbg.png" class="common-bg"></image> <--导航栏背景图-->
<!-- 自定义导航栏 -->

     <view class="navBarBox">
    <!-- 状态栏占位 -->
       <view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view> <!--paddingTop是导航栏的顶部到手机顶部的距离，即显示wifi和电量的部分-->
      <!-- 真正的导航栏内容 ，即与胶囊平行部分-->
       <view class="navBar" :style="{ height:navBarHeight+'px' }">
       <!-- <view>导航栏标题</view> -->

     <!--使用图片-->

       <image src="../../static/selecticon.png" class="selecticon"></image>
       <image src="../../static/smallbell.png" class="smallbell"></image>
   </view>
</view>

<!-- 页面内容 -->
<view>我是页面内容</view>
</view>
</template>

<script>
export default {
data() {
return {
// 状态栏高度
statusBarHeight: 0,
// 导航栏高度
navBarHeight: 0,
};
},
props: {

},
//第一次加载时调用
created() {
//获取手机状态栏高度
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
console.log(this.statusBarHeight);
// #ifdef MP-WEIXIN
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
const custom = wx.getMenuButtonBoundingClientRect()
console.log(custom)

// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
console.log("导航栏高度：" + this.navBarHeight)

// #endif
},
}
</script>

<style lang="scss">

.container{
background: rgba(245, 247, 249, 1);
height: 100vh;
position:relative;
.common-bg{
width:100%;
height:30%;
position:absolute;
}
.navBarBox {
position:absolute;
z-index:10;
right:240rpx;
.navBar {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.selecticon{
width:62rpx;
height:62rpx;
margin-right:24rpx;
}
.smallbell{
width:62rpx;
height:62rpx;
}
}
}

</style>

结果如图所示