为什么需要自定义导航

在小程序开发中，会遇到背景图铺满整个屏幕的需求，这个时候就必须要"navigationStyle": "custom"，才能让导航位置的样式可编辑，背景图才能覆盖到导航位置。这个时候就需要一个自定义导航，兼容所有设备的导航场景。

背景图铺满整个屏幕

自定义导航的使用

• json

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  },
  "navigationBarTextStyle": "white",
  "navigationStyle": "custom"
} 

• wxml

<view class="page">
  <image class="page-background" src="../../static/images/login/loginBg.png"></image>
  <view class="container">
    <navigation-bar title="微平台" titleLeft="14rpx"></navigation-bar>
  </view>
</view>

• wxss

.page{
  height: 100%; 
  color: #fff;
} 
.page-background{
  height: 100%;
  width: 100%;
  position: absolute;
}
.container { 
  position: relative;
  height: 100%; 
  width: 100%;
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  box-sizing: border-box; 
} 

自定义导航的代码

• app.js

// app.js
App({
  onLaunch() {
    this.initNavbar()
  },
  // 获取自定义navbar数据
  initNavbar: function () {
    const { statusBarHeight, platform } = wx.getSystemInfoSync()
    const { top, height } = wx.getMenuButtonBoundingClientRect()
    // 状态栏高度
    wx.setStorageSync('statusBarHeight', statusBarHeight)
    // 胶囊按钮高度 一般是32 如果获取不到就使用32
    wx.setStorageSync('menuButtonHeight', height ? height : 32)
    // 判断胶囊按钮信息是否成功获取
    if (top && top !== 0 && height && height !== 0) {
        const navigationBarHeight = (top - statusBarHeight) * 2 + height
        // 导航栏高度
        wx.setStorageSync('navigationBarHeight', navigationBarHeight)
    } else {
        wx.setStorageSync(
          'navigationBarHeight',
          platform === 'android' ? 48 : 40
        )
    }
  }
})

• navigation-bar.wxml

<!--navigationBar.wxml-->
<view class="navigation-container" style="{{'height: ' + navigationBarAndStatusBarHeight}}">
    <!--空白来占位状态栏-->
    <view style="{{'height: ' + statusBarHeight}}"></view>
    <!--自定义导航栏-->
    <view class="navigation-bar" style="{{'height:' + navigationBarHeight}}">
        <view wx:if="{{showLeftToolbar}}"
            class="navigation-buttons"
            style="{{'height:' + menuButtonHeight}}"
            bindtap="back">
            {{"<"}}
            <!-- 内容可自定义开发 -->
        </view> 
        <view class="navigation-title" style="line-height:{{navigationBarHeight}};left:{{titleLeft}}">{{title}}</view>
    </view>    
</view>
<!--空白占位fixed空出的位置-->
<view style="{{'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>

• navigation-bar.js

const app = getApp()
Component({
    properties: {
        // defaultData（父页面传递的数据）
        title: {
            type: String,
            value: '我是默认标题'
        },
        showLeftToolbar: {
            type: Boolean,
            value: false
        },
        titleLeft: { // 用于调整
            type: String,
            value: '104px'
        }
    },
    data: {
        // 状态栏高度
        statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
        // 导航栏高度
        navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
        // 胶囊按钮高度
        menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
        // 导航栏和状态栏高度
        navigationBarAndStatusBarHeight:
        wx.getStorageSync('statusBarHeight') +
        wx.getStorageSync('navigationBarHeight') +
        'px'
    },
    attached: function() {

    },
    methods: {
        back: function() {
            wx.navigateBack({
              delta: 1,
            })
        }
    }
})

• navigation-bar.wxss

/* navigationBar.wxss */
.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
}
.navigation-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navigation-buttons {
  display: flex;
  align-items: center;
  margin-left: 10px;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: transparent;
}
.navigation-title {
  position: absolute;
  left: 104rpx;
  right: 225rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

• navigation-bar.json

{
  "component": true,
  "usingComponents": {}
}