/*** 微信小程序头部自定义标题导航栏* * 参数：* pageTitle: 导航栏标题，默认不显示* navColor: 导航栏背景颜色，默认白色，透明为'transparent'属性值* noShowNavIcon: 不显示导航栏按钮，默认显示* isShowHome: 显示导航栏home按钮。默认不显示home，默认显示back* iconWhite: 导航栏按钮颜色，默认黑色，添加iconWhite属性即为白色* isShowCustomIcon: 是否显示用户自定义icon，默认不显示，与返回或home互斥* customIconSrc: 用户自定义icon的路径，支持网络路径和本地路径* noSticky: 取消导航栏粘性布局(不占头部导航栏位置)，默认不取消* titleColor: 标题颜色，默认黑色* titleAlign: 标题对齐方式，默认居中* titleMarginLeft: 标题左边距，默认为0px* titleFontSize: 标题字体大小，默认16px* titleFontWeight: 标题粗细，默认正常* * 外部样式类：(使用时注意权重，添加外部样式类无效果的时候，给类加点权重就可以了)* custom-icon-class: 标题左侧图标外部样式类* custom-title-class: 标题外部样式类* custom-root-class: 根节点外部样式类* * 事件：* overBack: 用户点击左上角返回按钮后回调* overHome: 用户点击左上角Home按钮后回调* navIcon: 用户点击自定义icon后回调* * 使用：在页面的json文件中* "usingComponents": {* "head-nav-bar": "/components/HeadNavBar/HeadNavBar"* },*/
wxml：
<view class="navbar custom-root-class" style="height:{{navHeight}}px; background:{{navColor}}; position: {{noSticky ? 'fixed':'sticky'}};"><view class="navbar-container" style="padding-top:{{navTop}}px;"><!-- 返回按钮 --><view wx:if="{{!noShowNavIcon}}"><!-- 默认显示返回，若添加isShowHome属性则显示主页，添加isShowCustomIcon则显示用户自定义icon --><view class="navbar-btn" wx:if="{{isShowCustomIcon}}" bindtap="navIcon"><image class="navbar-icon custom-icon-class" src="{{customIconSrc}}"></image></view><view class="navbar-btn" wx:elif="{{isShowHome}}" bindtap="navHome"><image class="navbar-icon custom-icon-class" src="./images/home-o.png" wx:if="{{iconWhite}}"></image><image class="navbar-icon custom-icon-class" src="./images/home.png" wx:else></image></view><view class="navbar-btn" wx:else bindtap="navBack"><image class="navbar-icon custom-icon-class" src="./images/back-o.png" wx:if="{{iconWhite}}"></image><image class="navbar-icon custom-icon-class" src="./images/back.png" wx:else></image></view></view><!-- 中间标题 --><view class="navbar_title custom-title-class" style="color: {{titleColor}}; justify-content: {{titleAlign}}; font-size: {{titleFontSize}};margin-left: {{titleMarginLeft}}; font-weight:{{titleFontWeight}}"><text>{{pageTitle}}</text><!-- 具名插槽 --><slot name="titleSlot"></slot></view></view></view>
js：
const app = getApp()Component({// 外部样式类externalClasses: ['custom-icon-class', 'custom-title-class', 'custom-root-class'],// 组件的属性列表properties: {pageTitle: {type: String,default: ''},navColor: {type: String,default: '#fff'},noShowNavIcon: {type: Boolean,default: false},noSticky: {type: Boolean,default: false},isShowHome: {type: Boolean,default: false},iconWhite: {type: Boolean,default: false},titleColor: {type: String,default: '#000'},titleAlign: {type: String,default: 'center'},titleFontSize: {type: String,default: '16px'},titleMarginLeft: {type: String,default: '0px'},titleFontWeight: {type: String,default: 'normal'},iconWidth: {type: String,default: '20px'},iconHeight: {type: String,default: '20px'},customIconSrc: {type: String,default: ''},isShowCustomIcon: {type: Boolean,default: false}},options: {// 在组件定义时的选项中启用多 slot 支持multipleSlots: true // 复数插槽: 是},// 组件的初始数据data: {// 导航栏数据navHeight: 0,remainHeight: 0,navTop: 0},// 生命周期函数推荐写法lifetimes: {// 生命周期函数，可以为函数，或一个在methods段中定义的方法名// 在组件实例进入页面节点树时执行attached: function () {// 设置导航栏，获取菜单按钮的布局位置信息let menuButtonObject = wx.getMenuButtonBoundingClientRect()// 获取系统信息wx.getSystemInfo({success: res => {// 状态栏的高度let statusBarHeight = res.statusBarHeight// 胶囊按钮与顶部的距离let navTop = menuButtonObject.top// 导航栏高度let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2// 除导航栏剩余高度let remainHeight = res.windowHeight - navHeight// 设置录入数据属性this.setData({navHeight: navHeight, // 导航栏高度remainHeight: remainHeight, // 除导航栏剩余高度navTop: navTop // 胶囊按钮与顶部的距离})// 子传父，将导航栏高度传过去/* this.triggerEvent('getNavHeight', {navHeight: this.data.navHeight}) */// 将导航栏高度设置进全局数据app.globalData.navHeight = navHeight// 将除导航栏剩余高度设置进全局数据app.globalData.remainHeight = remainHeight},fail(err) {console.log(err)}})},// 在组件实例被从页面节点树移除时执行detached: function () {}},// 组件的方法列表methods: {// 回退navBack() {wx.navigateBack()this.triggerEvent('onBack')},// 回主页navHome() {wx.switchTab({url: '/pages/index/index'})this.triggerEvent('onHome')},navIcon() {this.triggerEvent('onIcon')}},})
样例：
支持透明，标题部分可插槽
支持渐变色
常规居中，左上角icon可自定义，本地或者网络路径皆可
或者无标题，只有左上角icon
文件链接：
/download/qq_48702470/86817738
文件解压缩至项目根目录下的components文件夹下
使用：在想要使用页面的json文件中或者全局app.json文件中
"usingComponents": {
"head-nav-bar": "/components/HeadNavBar/HeadNavBar"
}
即可使用<head-nav-bar></head-nav-bar>
