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

json：

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

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

wxml：

<view class="body">
	<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}}">
				  <!-- 左边的返回按钮图标，根据需求删除，记得把多余的css和js也删了 -->
					<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>

wxss：

.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;
}

js：

Page({

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

  },

  //自定义导航上内边距自适应
  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
    }).then(res => {
      // console.log(res)
    }).catch(err => {
      // 如果报错，说明是通过二维码或者分享进入的，直接返回首页
      wx.reLaunch({
        url: '../index/index',
      })
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    //初始化页面自定义导航栏
    _this.attached();
  },

  //切换导航
  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
    })
  },

})

❀改一：

如果你想让通知栏的颜色换成白色，在json文件中加入"navigationBarTextStyle": "white"就可以了，另外返回按钮的话自己换张白色的图标就好了，没有图标的小伙伴可以去阿里巴巴矢量图标库下载，直接搜索“返回”就很多了，自己调一下颜色就好。

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

❀改二：

如果你不想内容溢出到通知栏，只需要把css中的.header{position: absolute;}去掉就好了。

❀改三：

如果你只想让简单的标题文字居中，

可以在navigation-title这个标签里写个标题

<view class='weui-navigation-bar__center'>
	<!-- 自定义导航标题 -->
	<view class="navigation-title">
		<view>居中</view>
	</view>
</view>

接着在.weui-navigation-bar__center这里类里用absolute和translate设置一下偏差就好

.weui-navigation-bar__inner .weui-navigation-bar__center {
  font-size: 17px;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center
}

❀改四：

如果你的页面不要返回按钮，并且想让可用区左右两边的padding相等的话

只需要在原来的attached方法的_this.setData上加上一个innerPaddingLeft参数

  attached: function attached() {
    wx.getSystemInfo({
      success: function success(res) {
        _this.setData({
          innerPaddingLeft: isSupport ? 'padding-left:' + (res.windowWidth - rect.left) + 'px' : ''
        });
      }
    });
  },

紧接着在含有weui-navigation-bar__center这个类名标签的style上绑定innerPaddingLeft这个参数就可以了。

  <view class='weui-navigation-bar__center' style="{{innerPaddingLeft}}">
	
  </view>

❀改五：

如果你的让导航条跟随页面滚动而滚动的话

把weui-navigation-bar__inner这个类名的position: fixed;换成position: absolute;就可以了。

.weui-navigation-bar__inner {
  position: absolute;
}

❀改六：

如果想在页面滚动时动态的去给导航栏添加背景颜色的话

只需在onPageScroll事件里动态的设置一个背景颜色，

  /**
   * 监听滚动scrollTop滚动的距离,获取滚动条当前位置
   * 动态改变导航栏背景颜色的透明度
   * */
  onPageScroll: function (e) {
    // console.log(e.scrollTop)
    // 导航栏透明度
    let Alpha = e.scrollTop * 1 / 100;
    // 导航栏背景颜色    
    let navigationBackgroundColor = 'rgba(0,117,191,' + Alpha + ')';
    this.setData({
      navigationBackgroundColor: navigationBackgroundColor,
    })
  },

紧接着在含有weui-navigation-bar__inner这个类名的标签加上绑定这个背景颜色就好了就可以了。

<view class="weui-navigation-bar__inner" style="background-color: {{navigationBackgroundColor}}"></view>

觉得不错的小伙伴记得点赞哦！！（づ￣3￣）づ╭❤～