小程序自定义导航栏，其实就是这么简单

很多时候项目的需求导致我们必须自定义小程序的一些东西，虽然小程序自身的这些比较好用，但是可扩展性很差，不能满足我们的需求，比如我遇到的就是导航栏加上分享图标，这种只能自定义去写了，下面是我总结的一些东西，希望能够帮到你。

解决方案：

（1）单页面单独自定义导航，只兼容到7.0.0，不过现在也够用了
（2）全局自定义导航
bug：自定义导航可能会影响到小程序自带的下拉刷新，上拉加载等功能的实现，这个还要看具体问题。
如果较少页面需要自定义，建议使用第一种方案。
此时我们就需要用到自定义组件，如果不知道如何创建组件，请移步另一篇文章。

//组件nav.wxml
<view class="navbar" style='height:{{navH}}px;background:{{bgColor}}'>
  <view class="navbar-action-wrap" wx:if="{{showNav}}">
    <view wx:if="{{showHome}}" class="shareView" bindtap="showShare">
      <image class="shareIcon" mode='widthFix' src='/assets/images/share{{bgColor=="#fff"?"":"_white"}}.png'></image>
    </view>
    <view wx:if="{{showBack}}" class="backView" bindtap="toIndex">
      <image mode='widthFix' class="backIcon" src='/assets/images/leftIcon.png'></image>
    </view>
  </view>
  <view class='navbar-title' style='background:{{bgColor}};color:{{bgColor=="#fff"?"#333":"#fff"}}'>
    {{pageName}}
  </view>
</view>

• bgColor是由父组件控制的，因为我标题栏有好几种状态，其中有一个是黄色背景，这里用这个变量来控制背景色
• showNav是用来控制是否显示图标，因为我有的页面需要显示分享按钮或者返回按钮，有的页面什么图标都不要
• showHome是控制是否显示分享按钮，showBack是控制是否显示返回按钮，里面的图片我用的是本地图，记得换成你们自己的图片啊
• pageName是标题的内容
• 以上这几个变量都需要父组件传值控制

//组件nav.json
{
  "component": true
}

注意：json文件里要设置一下

//组件nav.wxss
.navbar {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 90;
}
 
 
.navbar-title {
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  /* background-color: #fff;
  color: #333; */
  font-size: 18px;
}
 
.navbar-action-wrap{
  position: absolute;
  left: 10px;
  bottom: 7px;
  z-index: 100;
}
.navbar-action_item{
  padding:3px 0;
  color: #333;
}
.navbar-action-group .navbar-action_item{
 border-right: 1px solid #e8e8e8;
 padding:3px 12px;
}
.shareView{
  position: absolute;
  left: 0;
  bottom: 0;
  padding-left: 10px;
  padding-bottom: 4px;
  padding-right: 30px;
  z-index: 100;
}
.shareIcon{ 
  width: 28rpx;
  height: 28rpx;
  /* left: 10px;
  bottom: 7px; */
}
.backView{
  position: absolute;
  left: 0;
  bottom: -5px;
  padding: 0 30px 7px 0;
  z-index: 100;
}
.backIcon{
  width: 20rpx;
  height: 36rpx;
  /* left: 0px; */
}
 image.back{
  position: absolute;
  width: 20rpx;
  height: 36rpx;
  float: left;
  top: 28rpx;
  left: 30rpx;
}

//组件nav.js
const App = getApp();
Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    pageName: String,
    showNav: {
      type: Boolean,
      value: true
    },
    showHome: {
      type: Boolean,
      value: true
    },
    showBack: {
      type: Boolean,
      value: true
    },
    bgColor: {
      type: String,
      value: '#fff'
    },

  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  lifetimes: {
    attached: function () {
      this.setData({
        navH: App.globalData.navHeight
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //回退
    navBack: function () {
      wx.navigateBack({
        delta: 1
      })
    },
    showShare() {
      this.triggerEvent('showShare');
    },
    //回主页
    toIndex: function () {
      wx.reLaunch({
        url: '/pages/index/index'
      })
    },
  }
})

• properties里面的值是接收父组件的传值
• lifetimes里面是周期函数
• this.triggerEvent(这里面是父组件的方法)

子组件现在就写好了，接下来我们就要在页面中引入使用
以index页面为例：
首先需要在json文件中声明要使用的组件：usingComponents{}
因为我们是自定义头部，所以需要再加上一句"navigationStyle":“custom”

//index.json
"usingComponents": {
    "navbar": "/components/navHeader/navHeader"
  },
"navigationStyle":"custom"

然后在index.wxml中引入组件

<view class="all_box">
	<navbar page-name="带货清单" bindshowShare="showShare" show-back="{{showBack}}" bg-color="{{showList?'#fff':'#FFDA6C'}}"></navbar>
	<view>这里是页面的内容</view>
</view>

//index.js
Page({
	data:{
		showBack:false,
    	bgColor:'#fff',
    	showList:true,//这里我是为了判断有没有数据，有数据的时候为true,没数据的时候为false,具体改变自己去写，我是在获取数据之后改变的
	},
	methods:{
  		showShare: function() {
    		console.log('这里是父组件的方法')
 	}
})

如果需要全局自定义导航，就在app.json去配置自定义