微信小程序-自定义头部导航

先展示效果：

 步骤一：

app.json:中添加

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

步骤二：

app.js：获取手机系统信息及导航高度

App({
  onLaunch: function (options) {
    // 获取手机系统信息
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })
  },
  globalData: {
    navHeight: 0
  }
})

步骤三：

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

步骤四：pages中的页面加入导航index.wxml

<view class='nav' style='height:{{navH}}px'>
  <view class='title_icon'>
    <image src='back.png' mode='aspectFit' class='back' bindtap='navBack'></image>

    <view></view>
    <image src='home.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>

步骤五：pages的页面index.js

const app = getApp()
Page({
  onLoad: function(options) {
    // swiper设置高度
    var that = this;
    that.setData({
      navH: app.globalData.navHeight
    })
   },
  // 返回上一页
  navBack: function () {
    wx.navigateBack({
      delta: 1
    })
  },
  navHome: function () {
    wx.reLaunch({
      url: '../index/index'
    })
  }
})