自定义导航栏
App.js
onlaunch(){
globalData: {
navBarHeight: 0 // 导航栏高度
}
// 获取系统信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 整体导航栏高度(px) = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
}
homeHead导航栏
/components/homeHead/homeHead.wxml
<view class="nav" style="height: {{status + navHeight}}px;background-color: {{background}};">
<!-- 手机状态栏 -->
<view class="status" style="height: {{status}}px;{{containerStyle}}"></view>
<!-- 自定义导航栏 -->
<view class="navbar" style="height:{{navHeight}}px;{{containerStyle}}">
<!-- 导航栏左侧按钮 -->
<view style="{{backIcon ? '' : 'width: 152rpx;margin-left: 24rpx'}}">
<!-- 返回按钮 -->
<view class="back-icon" wx:if="{{backIcon}}" bindtap="back">
<image class="imag_back" src="{{backIcon}}"></image>
</view>
<!-- 首页按钮 -->
<view
class="home-icon"
wx:if="{{homeIcon}}"
bindtap="home"
style="{{backIcon ? '' : 'left: 84.2rpx'}}"
>
<image class="imag_home" src="{{homeIcon}}"></image>
</view>
</view>
<!-- 标题为图片 -->
<view class="nav-icon" wx:if="{{titleImg}}">
<image class="image_nav" src="{{titleImg}}" style="{{iconStyle}}"></image>
</view>
<!-- 标题为文字 -->
<view class="nav-title" wx:if="{{titleText && !titleImg}}">
<text style="{{textStyle}}">{{titleText}}</text>
</view>
</view>
</view>
/components/homeHead/homeHead.wxss
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
.navbar {
position: relative;
display: flex;
align-items: center;
}
.back-icon,
.home-icon {
position: absolute;
transform: translateY(-50%);
top: 50%;
display: flex;
}
.back-icon {
left: 28rpx;
z-index: 10002;
}
.home-icon {
left: 94rpx;
z-index: 10002;
}
.back-icon .imag_back {
margin: auto;
width: 80rpx;
height: 60rpx;
vertical-align: -1rpx;
}
.home-icon .imag_home {
margin: auto;
width: 82rpx;
height: 62rpx;
margin-left: 10rpx;
vertical-align: -1rpx;
}
.nav-title,
.nav-icon {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
font-size: 0;
font-weight: bold;
}
/components/homeHead/homeHead.js
Component({
properties: {
background: { //背景颜色，导航栏
type: String,
value: '#ffffff'
},
color: { //字体颜色
type: String,
value: 'rgba(0, 0, 0, 1)'
},
titleText: { //导航栏文字
type: String,
value: ''
},
backgroundImg: { //背景图片路径
type: String,
value: ''
},
titleImg: { //标题图片
type: String,
value: ''
},
backIcon: { //返回按钮
type: String,
value: ''
},
homeIcon: { //房子按钮
type: String,
value: ''
},
fontSize: { //字体大小
type: Number,
value: 16
},
isFontSizeRpx: { //字体大小是否为rpx
type: Number,
value: 0
},
fontWeight: { //字体宽度
type: Number,
},
iconHeight: { //icon高度
type: Number,
value: 19
},
iconWidth: { //icon宽度
type:Number,
value: 58
}
},
attached: function(){
var that = this;
that.setNavSize();
that.setStyle();
},
data: {
},
methods: {
// 通过获取系统信息计算导航栏高度
setNavSize: function() {
let that = this,
sysinfo = wx.getSystemInfoSync(),
statusHeight = sysinfo.statusBarHeight,
that.setData({
status: statusHeight, // 手机状态栏高度
navHeight: 48 // 自定义导航栏栏的高度
})
},
setStyle: function() {
let units
var that = this,
containerStyle,
textStyle,
iconStyle;
// 字体单位
if(that.data.isFontSizeRpx == 1){
units = 'rpx'
}else{
units = 'px'
}
// 导航栏样式
containerStyle = ['background:' + that.data.background].join(';');
// 标题样式
textStyle = ['color:' + that.data.color,'font-size:' + that.data.fontSize + units,'font-weight:' + that.data.fontWeight].join(';');
// 标题图片样式
iconStyle = ['width: ' + that.data.iconWidth + 'px','height: ' + that.data.iconHeight + 'px'].join(';');
that.setData({
containerStyle: containerStyle,
textStyle: textStyle,
iconStyle: iconStyle
})
},
// 返回事件
back: function(){
this.triggerEvent('back')
},
home: function() {
this.triggerEvent('home');
}
}
})
页面中使用
<home-head background="#f8f8f8" titleText="{{title}}" backIcon="../../assets/images/home/back.png" bindback="back" fontSize="28" fontWeight="400" isFontSizeRpx="1"></home-head>
<view style="height:{{navBarHeight}}px"></view>
<view>
<!-- 页面内容 -->
</view>
this.setDate({
navBarHeight: getApp().globalData.navBarHeight, // 导航栏高度
})
