微信小程序自定义头部导航栏 胶囊按钮

效果图


支持 导航栏自定义背景颜色、背景图片 支持返回文字自定义 支持导航标题自定义

首先在app.json window配置项添加

"window": {
		"navigationStyle": "custom"
	}	

自定义头部导航栏代码
wxml部分

<view class='nav' style='height:{{navH}}px'>
  <view class='title_icon'>
    <image src='fanhuii.png' mode='aspectFit' class='back' bindtap='navBack'></image>
 
    <view></view>
    <image src='shouye.png' mode='aspectFit' class='home' bindtap='navHome'></image>
  </view>
  <view class='title_text'>
    BPHOTO
  </view>
</view>
<!--正文-->
<view class="container" style="margin-top: {{navH}}px">
 
 
</view> 

wxss部分

/* 自定义导航 */
 
.nav {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background: #fff;
}
 
.title_text {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-size: 34rpx;
}
 
.title_icon {
  position: absolute;
  bottom: 10rpx;
  left: 10rpx;
  border-radius: 70rpx;
  box-sizing: border-box;
  border: 0.5px solid #eaeaea;
  display: flex;
  z-index: 20;
}
 
.title_icon image {
  display: inline-block;
  overflow: hidden;
  width: 32rpx;
  height: 36rpx;
  padding: 16rpx 32rpx;
  text-align: center;
}
 
.title_icon view {
  height: 18px;
  border-left: 1px solid #eaeaea;
  margin-top: 6px;
}

js部分

Page({
  data:{
    navH:0
  },
  onLoad: function (options) {
    // swiper设置高度
    this.navHeight()
   
  },

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

  navHeight:function(){
    var that = this;
    // 获取手机系统信息
    wx.getSystemInfo({
      success: res => {
        //导航高度
        that.data.navH = res.statusBarHeight + 46; 
        that.setData({ navH: res.statusBarHeight + 46})
      }, fail(err) {
        console.log(err);
      }
    })
  },

  // 返回上一页
  navBack: function () {
    wx.navigateBack({
      delta: 1
    })
  },
  navHome: function () {
    wx.reLaunch({
      url: '../index/index'
    })
  }
})