1，在小程序组件中新建：
2，wxml代码：
//bgColor是顶部背景颜色
<view class="navbar" style="background: {{bgColor}};height: {{navBarHeight}}px;">
<view class="title-container {{show ? 'pd0':''}}" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBottom}}px;">
<view class='capsule' hidden="{{show}}" style="border-radius: {{menuHeight/2}}px;height:{{menuHeight}}px;line-height:{{menuHeight}}px;">
<view class="back" catchtap='back'>
<image src='{{nginxUrl}}images/common/goBack.png'></image>
</view>
<view class="shu"></view>
<view class="home" catchtap='backHome'>
<image src='{{nginxUrl}}images/common/goHome.png'></image>
</view>
</view>
<view class='title' style="line-height:{{menuHeight}}px;margin-right: {{menuRight}}px;">
<image wx:if="{{showlogo}}" src='{{nginxUrl}}images/common/logo.png'></image>
//由父组件传入的title参数
<text>{{title}}</text>
</view>
</view>
</view>
3，js：
const app = getApp()
Component({
properties: {
title: {
type: String,
value: 'Wechat'
},
bgColor:{
type: String,
value: 'Wechat'
},
show:{
type: Boolean,
value:false
},
showlogo:{
type: Boolean,
value:false
},
back: {
type: Boolean,
value: false
},
home: {
type: Boolean,
value: false
}
},
//在app.js中获取如下值
data: {
navBarHeight: app.globalData.navBarHeight,
menuHeight: app.globalData.menuHeight,
menuRight:app.globalData.menuRight,
menuBottom:app.globalData.menuBottom,
nginxUrl: app.globalData.nginxUrl,
},
methods: {
backHome: function () {
wx.reLaunch({
url: '/pages/home/home',
})
},
back: function () {
wx.navigateBack({
delta: 1
})
}
}
})
4,wxss:
.navbar {
width: 100vw;
position: fixed;
top: 0;
z-index: 4;
background-color: #a0d8fd;
}
.title-container {
display: flex;
align-items: center;
position: absolute;
box-sizing: border-box;
padding-right: 200rpx;
width: 100%;
}
.pd0{
padding: 0;
}
.capsule {
width: 150rpx;
height: 100%;
display: flex;
align-items: center;
background-color: rgba(0,0,0,0.15);
}
.capsule > view {
width: 49%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.capsule view image{
width: 40rpx;
height: 40rpx;
}
.capsule > view.shu{
width: 2rpx;
height: 40rpx;
background-color: rgba(255,255,255,0.4);
}
.title {
color: #333;
font-size: 36rpx;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
text-align: center;
}
.title image{
width: 40rpx;
height: 40rpx;
vertical-align: middle;
margin-right: 10rpx;
}
5，json:
{
"component": true
}
6,app.js的onShow()中获取胶囊高度位置等：
onShow(){
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
this.globalData.menuHeight = menuButtonInfo.height;
}
