本文转载自微信小程序自定义头部导航栏
微信小程序自定义头部导航栏
先看下demo的效果：
最终要实现的效果：
在tabbar页面不显示左侧按钮；分享出去的页面进入后不显示左侧返回按钮；点击返回按钮可以自行设置返回层级；字体颜色，背景颜色的设置；左侧按钮的深浅样式切换；
使用自定义组件定义导航栏
在小程序跟目录下建立component / nav文件夹用来放我们的导航栏组件
首先在app.js中获取机型信息
onLaunch() {wx.getSystemInfo({success: (res) => {this.globalData.windowWidth = res.windowWidththis.globalData.statusBarHeight = res.statusBarHeightthis.globalData.navBarHeight = 44 + res.statusBarHeight}})this.globalData.capsule = wx.getMenuButtonBoundingClientRect() //获取胶囊宽高及位置},globalData: {capsule:null,}
在nav组件中编写组件
wxml:
<view class="nav-box"><view wx:if="{{ seat }}" class="seat-box" style="height:{{ 44 + statusBarHeight}}px;"></view><view class='nav-wrap' style="background-color:{{backgroundColor}};"><view style="height:{{statusBarHeight}}px;"></view><view class='content'><view class="title" style="line-height:44px;color:{{titleColor}};">{{navTitle}}</view><view wx:if="{{isShow}}" class="capsule-box {{isWhite? 'isWhite':'isblack'}} {{!isBack?'noBack':''}}"style='height:{{capsule.height}}px;position: absolute; top:{{capsule.top-statusBarHeight}}px; left:{{left}}px;'><block wx:if="{{isBack}}"><view class="capsult-item"><image class='back' bindtap='back'src="{{isWhite ? '/images/ic_nav_back_white.png':'/images/ic_nav_back_blac.png'}}"mode="aspectFit" lazy-load="false" data-num="{{pageNum}}" binderror="" bindload=""></image></view><view class="{{isWhite? 'lineWhite':'lineblack'}}" hover-class="none" hover-stop-propagation="false"></view></block><view class="capsult-item"><image class='home' bindtap="toIndex"src="{{isWhite ? '/images/ic_nav_home_white.png':'/images/ic_nav_home_black.png'}}"mode="aspectFit" lazy-load="false" binderror="" bindload=""></image></view></view></view></view></view>
wxss
.nav-wrap {position: fixed;top: 0;left: 0;width: 750rpx;z-index: 99999;}.content {position: relative;width: 100%;height: 44px;}.back {width: 44rpx;height: 44rpx;}.home {width: 44rpx;height: 44rpx;}.lineblack {height: 36rpx;background: #B0B0B0;width: 1rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0.5;}.lineWhite {height: 36rpx;background: rgba(255, 255, 255, .7);width: 1rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0.5;}.title {text-align: center;font-weight: 900;font-size: 32rpx;}.letBtnBox {width: 100px;display: flex;align-items: center;}.capsule-box {width: 85px;border-radius: 88rpx;background: #FFFFFF;overflow: hidden;display: flex;justify-content: space-between;}.isWhite {border: 1rpx solid rgba(255, 255, 255, .25);background: rgba(0, 0, 0, .15);}.isblack {border: 1rpx solid rgba(0, 0, 0, .1);background: rgba(255, 255, 255, .6);}.opacity {background: rgba(0, 0, 0, .1);}.capsult-item {display: flex;width: 50%;align-items: center;justify-content: center;}.noBack{width: 32px;}.noBack .capsult-item{width: 100%;}
js
// 是否显示左侧按钮isShow: {type: Boolean,value: true},// 是否显示左侧返回按钮isBack:{type:Boolean,value:true},// 返回层级 默认为1pageNum: {type: Number,value: 1}},data: {capsule: {}},lifetimes:{//判断是否有上一级页面，如果有显示返回按钮（isBack参数）否则不显示attached: function() {this.setData({isBack:getCurrentPages().length === 1?false:true})}},ready() {//获取机型状态栏信息const {statusBarHeight,navBarHeight} = app.globalDataconsole.log(app.globalData)this.setData({statusBarHeight,navBarHeight,left: app.globalData.windowWidth - app.globalData.capsule.right, //胶囊据右边距离capsule: app.globalData.capsule})},methods: {//返回层级 默认为1back(e) {wx.navigateBack({delta: e.currentTarget.dataset.num})},//跳转到首页toIndex() {wx.switchTab({url: '/pages/index/index'})}}})
json
{"component": true}
页面中引用
在需要使用自定义导航栏的页面设置
{"usingComponents": {"navbar":"/component/nav/nav"},"navigationStyle":"custom"}
wxml中引入组件
<navbar isShow="{{isShow}}" navTitle="{{navTitle}}" backgroundColor="{{backgroundColor}}" isWhite="{{isWhite}}" pageNum="1" titleColor="{{titleColor}}"></navbar>
js文件配置
data:{isShow:true,//是否显示左侧按钮backgroundColor:'red',//背景颜色navTitle:'首页',//标题isWhite:true,//是否白色胶囊titleColor:'#fff',//字体颜色}
images静态资源我项目中是使用的这四个图标。尺寸为44*44px; 如果你的项目中UI提供的图标尺寸不是这个，一定要对应去修改图标的nav.wxss中图片的尺寸大小！！！！
四个图标（可下载，添加了背景背景色方便看清正常加载没有背景颜色）：
图标预览图：
