微信小程序自定义navigation-bar导航栏(自适应安卓苹果)

最近在写商城，中途遇到了需要自定义修改导航栏的操作，大概是如下图接过样子的，于是想手写一份，但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的，于是找了下官方程序员写的文档(点这里查看)，(⊙o⊙)…一脸懵逼咧，貌似不能满足这需求，而且后续也要实现点击导航滚动定位(需要了解可以点这里查看)，组件传参麻烦，而且还未必能实现，于是我把WeUI的navigation-bar组件的精华提取出来写了一份。顺带录了个GIF，在不同设备都是可以与分享按钮保持同一水平高度的。

wxml文件：

<view>
	<view class="header">
		
		<view class="navigation">
			<view class="weui-navigation-bar {{extClass}}">
				<view class="weui-navigation-bar__placeholder {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px;visibility: hidden;">view>
				<view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px; color: {{color}};background: {{background}};{{displayStyle}};{{innerPaddingRight}};{{innerWidth}};">
					<view class='weui-navigation-bar__left' style="{{leftWidth}}"  bindtap="back">
						<view class="weui-navigation-bar__buttons">
							<view class="weui-navigation-bar__button weui-navigation-bar__btn_goback">view>
						view>
					view>
					<view class='weui-navigation-bar__center'>
						
						<view class="navigation-title">
							
							<block wx:for="{{navigationArr}}" wx:for-index='index' wx:key='index'>
								<view bindtap="cutTitle" data-index="{{index}}" class="{{item.isSelected ? 'selected-title':''}}">
									<text>{{item.title}}text>
								view>
							block>
						view>
					view>
				view>
			view>
		view>
	view>
	<view class="main">
		
		<view class="slideshow">
			<image src="http://m.qpic.cn/psc?/V14ZaBeY27gVgy/zkoezU7GGNbZGOF.DPhgQWdZDQSn8Jd6cveuxVrM5i8l2kSZLs4oxthN912G3PseAlKnSZdOiP2rg1tsok8XenrbNBnnQSYJo190MRLXjI4!/b&bo=4wKbAuMCmwIRGS4!&rf=viewer_4">image>
		view>
	view>
	<view class="footer">view>
view>

css文件：

如果你不想内容溢出到通知栏把.header{position: absolute;}去掉就好了

.navigation {
  --height: 44px;
  --right: 190rpx
}

.weui-navigation-bar {
  overflow: hidden
}

.weui-navigation-bar .android {
  --height: 48px;
  --right: 222rpx
}

.weui-navigation-bar__inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5001;
  height: var(--height);
  display: flex;
  align-items: center;
  padding-right: var(--right);
  width: calc(100% - var(--right));
  background-color: rgba(255, 255, 255, 0.4)
}

.weui-navigation-bar__inner .weui-navigation-bar__left {
  position: relative;
  width: var(--right);
  padding-left: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-box-pack: center
}

.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat
}

.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback {
  font-size: 12px;
  width: 1em;
  height: 2em;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-size: cover
}

.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback:active {
  opacity: .5
}

.weui-navigation-bar__inner .weui-navigation-bar__center {
  font-size: 17px;
  text-align: center;
  position: relative;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center
}
.weui-navigation-bar__placeholder {
  height: var(--height);
  background: #F8F8F8;
  position: relative;
  z-index: 50
}

/* 上面的是WeUI的代码 */

Page{
  background-color: #f1f1f1;
}

.header{
  position: absolute;
}

.navigation-title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
}

.navigation-title text{
  font-size: 28rpx;
}

.navigation-title .selected-title{
  color: red;
  position: relative;
}
.navigation-title .selected-title::before{
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  margin-left: -25rpx;
  width: 50rpx;
  height: 4rpx;
  background-color: red;
}
.slideshow image{
  width: 100%;
  height: 600rpx;
}

JavaScript文件：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //导航数组
    navigationArr: [{
        title: '商品',
        isSelected: true
      },
      {
        title: '评价',
        isSelected: false
      },
      {
        title: '详细',
        isSelected: false
      },
      {
        title: '推荐',
        isSelected: false
      }
    ]

  },
  //切换导航
  cutTitle:function(e){
    // console.log(e.currentTarget.dataset.index)
    let that = this;
    let index = e.currentTarget.dataset.index;
    var navigationArr = that.data.navigationArr;
    //清空全部样式
    navigationArr.forEach((item)=>{
      item.isSelected = false;
    })
    //点击的导航添加上样式
    navigationArr[index].isSelected = true;
    that.setData({
      navigationArr:navigationArr
    })
  },

  //自定义导航上内边距自适应
  attached: function attached() {
    var _this = this;
    var isSupport = !!wx.getMenuButtonBoundingClientRect;
    var rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
    wx.getSystemInfo({
      success: function success(res) {
        var ios = !!(res.system.toLowerCase().search('ios') + 1);
        _this.setData({
          ios: ios,
          statusBarHeight: res.statusBarHeight,
          innerWidth: isSupport ? 'width:' + rect.left + 'px' : '',
          innerPaddingRight: isSupport ? 'padding-right:' + (res.windowWidth - rect.left) + 'px' : '',
          leftWidth: isSupport ? 'width:' + (res.windowWidth - rect.left) + 'px' : ''
        });
      }
    });
  },
  //自定义导航返回图标操作
  back: function back() {
    wx.navigateBack({
      delta: 1
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    _this.attached();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

})

json文件：

加上"navigationStyle": "custom"可以把原有导航去掉

{
  "navigationStyle": "custom",
  "usingComponents": {}
}

最后记得看下你创建的page文件注册没，没有的话的原有导航是依旧存在的，咳咳。