小程序自定义导航栏

小程序app.json中有一个配置可以自定义导航栏，只保留右上角胶囊按钮

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "navigationStyle":"custom" // 导航栏样式，仅支持以下值：default 默认样式,custom 自定义导航栏，只保留右上角胶囊按钮
  }
}

navigationStyle不设置或者设置为default的时候页面是这样的：

设置"navigationStyle":"custom"之后，页面是这样的：

可以看到，此时微信的头部已经没有了，只保留了右上角胶囊部分，接下来实现自定义头部组件
因为每个人的项目需求都不一样，这里只讲我个人学习实现的简单组件，具体样式和功能还需要各位根据实际情况自己实现
首先创建组件文件目录，如图：

header.json中需要声明这是一个组件：

{
  "component":true,
  "usingComponents": {}
}

header.wxml中是组件的dom结构：

<view class='wx-header of {{isShadow}}' style="color:{{color}};padding-top:{{headerPaddingTop}};background:{{background}}">
  <view class='fl t-center icon iconfont {{icon_left}}' bindtap='_iconLeftTap'></view>
  <view class='fl title'>{{title}}</view>
</view>

header.wxss中是组件的样式代码:

@import '../../app.wxss';
@import '../../iconfont/iconfont.wxss';

.wx-header{
  height: 44px;width: 100%;position: fixed;z-index: 9999;
  line-height: 44px;box-sizing: content-box;
  }
.shadow{box-shadow: 0 4px 4px #eee;}
.wx-header .title{height: 44px;padding-left: 10px;font-size: 30rpx;}
.wx-header .icon{height: 44px;width:44px;font-size: 22px;}

app.wxss中定义的样式组件中是不能直接使用的，需要引入，考虑到头部一般需要返回箭头或者其他的图标，这里引入了iconfont文件，关于小程序引入字体图标，将在下一篇文章中讲到。
接来下是最主要的header.js,组件的属性，方法都在这里定义：

//获取应用实例
const app = getApp();

Component({
  options: {
    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  },
  /* 组件的属性列表*/
  properties: {
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },  
    icon_left:{         // icon 类名,默认左箭头
      type:String,
      value:'icon-return'
    },
    background: {       // 背景色
      type: String,
      value: '#fff'
    },
    color: {             // icon及title色值
      type: String,
      value: '#000'
    },
    isShadow:{          // 是否有阴影,默认无背景
      type: String,
      value:''
    },
    headerPaddingTop: { // 动态获取设备状态栏高度
      type: String,
      value: app.globalData.statusBarHeight + 'px'
    },
    goUrl: {            // icon点击跳转路径，默认回退
      type: String,
      value: ''
    }
  },
  data:{
    // 组件显示控制
    // isShow: false
  },
  /*组件的方法列表*/
  methods: {
    //隐藏弹框
    _iconLeftTap() {
      console.log('左边icon点击了');
      console.log(this.data.goUrl);
      if (this.data.goUrl != '' && this.data.goUrl != undefined){
        wx.navigateTo({
          url: this.data.goUrl
        })
      }else{
        wx.navigateBack();
      }
    },
    /*内部私有方法建议以下划线开头 triggerEvent 用于触发事件*/
    _error() {
      //触发取消回调
      this.triggerEvent("error")
    }
  }
})

页面中使用组件的方法如下：

json文件中声明引入的组件，以index.json为例：

{
  "navigationBarTitleText":"首页",
  "usingComponents": {
    "header": "/components/header/header"
  }
}

index.wxml中使用组件：

<!--index.wxml-->
<view class="container">
  <header
    title='首页'
    icon_left='icon-message'
    background='transparent'
    color="#fff"
    isShadow='shadow'    
    goUrl='../product/search/search'>
  </header>
</view>

效果如下图：

另：也可以引用页面的js文件中获取组件的实例，在js中调用组件的方法，比如点击按钮触发弹框组件，具体方法如下：

1、页面中使用组件的时候定义一个id

<!--index.wxml-->
<view class="container">
  <header
    id="index_header"
    title='首页'
    icon_left='icon-message'
    color="#fff"
    isShadow='shadow'    
    goUrl='../product/search/search'>
  </header>
</view>

2、js中通过id获取组件实例

onReady:function(){
    this.header = this.selectComponent("#index_header");
    this.header._iconLeftTap();
}

当然点击按钮显示弹框这种功能也可以通过操作数据控制弹框的显示隐藏，具体还要根据场景来看哪种方法更加合适。

本篇文章就写到这里，如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。