小程序万能自定义头部导航组件

第一：现在全局app.js中获取不同手机的头部高度
handleSystemInfo () {
let sysinfo = wx.getStorageSync('sysinfo')
if(!sysinfo) {
sysinfo = wx.getSystemInfoSync()
wx.setStorageSync('sysinfo', sysinfo)
}
this.globalData.model = sysinfo.model
this.globalData.statusHeight = sysinfo.statusBarHeight
if (!sysinfo.system.indexOf('iOS') > -1) {
this.globalData.navHeight = 48 // 32px + 8px * 2
} else {
this.globalData.navHeight = 44 // 32px + 6px * 2 = 44px
}
},
globalData: {
navHeight: ''，
statusHeight: ''
},
第二步在创建头部组件
navBar.wxml
<view class='nav' style='height: {{status + navHeight}}px'>
<view class='status' style='height: {{status}}px;{{containerStyle}}'></view>
<view class='navbar' style='height:{{navHeight}}px;{{containerStyle}}'>
<view class='icon-btn-group'>
<image src='{{backIcon}}' wx:if="{{backIcon}}" bindtap='back'></image>
<text class='hr'></text>
<image src='{{homeIcon}}' wx:if="{{homeIcon}}" bindtap='home'></image>
</view>
<view class='nav-icon' wx:if="{{titleImg}}">
<image src='{{titleImg}}' style='{{iconStyle}}'></image>
</view>
<view class='nav-title' wx:if="{{titleText && !titleImg}}">
<text style='{{textStyle}}'>{{titleText}}</text>
</view>
</view>
</view>
js:
// pages/navBar/navBar.js
const app = getApp()
Component({
/**

• 组件的属性列表
  */
  properties: {
  background: {
  type: String,
  value: 'rgba(255, 255, 255, 1)'
  },
  color: {
  type: String,
  value: 'rgba(0, 0, 0, 1)'
  },
  titleText: {
  type: String,
  value: '导航栏'
  },
  titleImg: {
  type: String,
  value: ''
  },
  backIcon: {
  type: String,
  value: '/assets/images/tback.png'
  },
  homeIcon: {
  type: String,
  value: '/assets/images/home.png'
  },
  fontSize: {
  type: Number,
  value: 16
  },
  iconHeight: {
  type: Number,
  value: 19
  },
  iconWidth: {
  type: Number,
  value: 58
  },
  judge: {
  type: Boolean,
  value: false
  }
  },
  attached: function () {
  var that = this;
  that.setNavSize();
  that.setStyle();
  },
  data: {

},
methods: {
// 通过获取系统信息计算导航栏高度
setNavSize: function () {
this.setData({
status: app.globalData.statusHeight,
navHeight: app.globalData.navHeight
})
},
setStyle: function () {
var that = this
, containerStyle
, textStyle
, iconStyle;
containerStyle = [
'background:' + that.data.background
].join(';');
textStyle = [
'color:' + that.data.color,
'font-size:' + that.data.fontSize + 'px'
].join(';');
iconStyle = [
'width: ' + that.data.iconWidth + 'px',
'height: ' + that.data.iconHeight + 'px'
].join(';');
that.setData({
containerStyle: containerStyle,
textStyle: textStyle,
iconStyle: iconStyle
})
},
// 返回事件
back: function () {
if (!this.data.judge) {
wx.navigateBack({
delta: 1
})
} else {
this.triggerEvent('back', {});
}
},
home: function () {
wx.switchTab({
url: '/pages/home/index'
})
this.triggerEvent('home', {});
}
}
})
css:
.nav {
width: 750rpx;
position: fixed;
top: 0;
z-index: 1000;
}

.navbar {
position: relative;
}

.back-icon {
left: 16px;
}

.home-icon {
left: 44px;
}
.hr{
width:2rpx;
height:36rpx;
background:rgba(51,51,51,1);
opacity:0.2;
}

.icon-btn-group image {
width: 48rpx;
height: 48rpx;
margin: auto;
}

.icon-btn-group image {
width: 48rpx;
height: 48rpx;
margin: auto;
}

.icon-btn-group{
width:174rpx;
height:64rpx;
background:rgba(255,255,255,0.6);
border-radius:32px;
border:1px solid rgba(0,0,0,0.08);
position: absolute;
top: 50%;
left: 16rpx;
transform: translateY(-50%);
display: flex;
align-items: center;
}

.nav-title, .nav-icon {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
font-size: 0;
font-weight: bold;
}
最后到需要引入的部分
json:
"navigationStyle": "custom"
js:
const app = getApp()

data: {
navHeight: app.globalData.navHeight,
statusHeight: app.globalData.statusHeight,
},
.wxml:
<navBar
title-text="订单"
bindback="back"/>
<view style='height:{{navHeight + statusHeight}}px;'></view>
完成
谢谢支持悟空—不死