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

最近在写商城，中途遇到了需要自定义修改导航栏的操作，大概是如下图接过样子的，于是想手写一份，但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的，于是找了下官方划水员写的文档(点这里查看)，(⊙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￣）づ╭❤～