小程序自定义导航栏

UI设计了一个小程序去掉原生导航栏的样式，要求实现。

开始时我发现全面屏和普通屏效果不一样，这样肯定不行，于是开始寻找解决办法。现已解决，记录如下。

首先，页面的json上肯定要设置"navigationStyle": "custom"，用来去掉原生导航栏。

接着新建组件title，title.wxml:

<view class="nav" style="height:{{navBarHeight}}px;">

 <view class="nav-main">

 <!-- 胶囊区域 -->

 <view 

  class="capsule-box"

  style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px">

 <!-- 导航内容区域 -->

 <view class="login-name color1_27 font2_36 ">{{name}}</view>

 </view>

 </view>

</view>

title的css：

.nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

}



.nav-main {

    width: 100%;

    height: 100%;

    position: relative;

}



.nav .capsule-box {

    position: absolute;

    box-sizing: border-box;

    width: 100%;

}

.login-name{

    width: 100%;

    text-align: center;

    font-size: 36rpx;

  }

title的js，

const util = require('../../utils/util.js');

const api = require('../../config/api.js');

const app = getApp();

Component({

  properties: {

    name:{

      type:String, 

      value:''

    },

  },

  data: {

    navBarHeight: app.globalData.navHight[0], //导航栏高度

    menuBotton: app.globalData.navHight[1],

    menuRight: app.globalData.navHight[2], // 胶囊距右方间距（方保持左、右间距一致）

    menuHeight: app.globalData.navHight[3]

  },

  attached(){

    var this_ = this;



  },

  methods: {

   

  }

})

接着，在app.js里的onlanch里执行这个方法

setNavBarInfo () {

    // 获取系统信息

    const systemInfo = wx.getSystemInfoSync();

    // 胶囊按钮位置信息

    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度

    this.globalData.navHight[0] = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;

    this.globalData.navHight[1] = menuButtonInfo.top - systemInfo.statusBarHeight;

    this.globalData.navHight[2] = systemInfo.screenWidth - menuButtonInfo.right;

    this.globalData.navHight[3] = menuButtonInfo.height;



  },

globalData: {

    navHight:[0,0,0,0], // 导航栏高度,胶囊距底部间距（保持底部间距一致）,胶囊距右方间距（方保持左、右间距一致）,胶囊高度（自定义内容可与胶囊高度保证一致）

｝