微信小程序-自定义导航栏

步骤

• 1.app.json的window配置项中设置”nativationStyle”:”custom”
• 2.在组件目录中新建一个文件夹用来存放页面布局组件，
• 3.在app.ts中的使用wx.getSystemInfoSync()和wx.getMenuButtonBoundingClientRect()分别获取系统信息中状态栏的高度和胶囊的信息

  globalData: {
    navBarHeight: 0,
    menuWidth: 0,
    menuHeigth: 0,
    menuTop: 0,
  },
  onLaunch () {
    const res = wx.getMenuButtonBoundingClientRect() // 获取胶囊信息
    const windowInfo = wx.getSystemInfoSync() // 获取系统信息
    this.globalData.navBarHeight = systemInfo.statusBarHeight + 44 // 状态栏高度
    this.globalData.menuWidth = res.width,  // 胶囊宽度
    this.globalData.menuHeigth = res.height, // 胶囊高度
    this.globalData.menuTop = res.top,  //较难离顶部的距离
  }

• 4.先完成自定义导航的页面布局

  /*wxml*/
  <view class="top" style="height: {{topBarHeight}}px; background-color:{{backgroundColor}};">
    <view style="height: {{menuHeight}}px; padding-top: {{top}}px" class="title">{{title}}</view>
    <view wx:if="{{isHome}}" style="margin-top:{{top}}px;height:{{menuHeight - 2}}px;width:{{menuWidth - 2}}px" class="menu">
      <van-icon name="arrow-left" size="24px" color="#fff" bind:click="onBack" />
      <view class="divide" />
      <van-icon name="wap-home-o" size="24px" custom-class="home" color="#fff" bind:click="onHome" />
    </view>
  </view>
  <!-- 占位 -->
  <view style="height: {{topBarHeight}}px;"></view>
  <view class="body" style="background: {{background}};">
    <slot />
  </view>
  
  /*scss*/
  .top {
    position: fixed;
    width: 100%;
    top:0;
    .menu {
      position: absolute;
      border-radius: 20px; 
      border: 1px solid transparent;
      box-shadow: inset 0px 1px 0px 0px rgba(114, 114, 114, 0.178);
      background-color: rgba(0, 0, 0, 0.178);
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .home {
      margin-right: 5px;
    }
    
    .divide {
      height: 18px;
      margin-left: 5px;
      border-right: 1px solid rgb(255, 255, 255, 0.5);
      margin-right: 10px;
    }
    
    .title {
      position: absolute; 
      width: 100%;
      display: flex; 
      justify-content: center; 
      align-items: center; 
      font-size: 20px; 
      font-weight: bold;
    }
  }
  
  /*json*/
  "usingComponents": {
      "van-icon": "@vant/weapp/icon/index"
    }

• 5.在ts文件中完成获取对应的页面信息

  // 获取应用实例，间接获取globalData的数据
  const app = getApp<IAppOption>()
    /**
     * 组件的属性列表
     */
  properties: {
    title: {
      type: String,
      value: ''
    },
    backgroundColor: {
      type: String,
      value: 'rgb(90 ,100 ,90)'
    },
    background: {
      type: String,
      value: '#fff'
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    navBarHeight:0,
    height: 0,
    top: 0,
    menuHeight: 0,
    menuWidth: 0,
    isHome: true
  },
  /**
   * 组件内生命周期
   */
  lifetimes: {
    attached () {
      const pages = getCurrentPages(); // 获取页面指针数组
      const currentPage = pages[pages.length - 1]; // 获取当前页
      this.setData({
        navBarHeight: app.globalData.navBarHeight, // 获取顶部栏的高度
        top: appData.globalData.menuTop,  // 获取胶囊与顶部的距离
        menuHeight: appData.globalData.menuHeigth, // 获取胶囊高度
        menuWidth: appData.globalData.menuWidth, // 获取胶囊宽度
        isHome: currentPage.route === "pages/index/index"
      })
    }
  
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    goHome(){
      wx.navigateTo({
        url:"pages/index/inedx",
      })
    },
    goBack(){
      wx.navigateBack({
        delta: 1
      })
    },
  },

优点

• 保证了导航栏的文本必定居中
• 保证了当出现安全区域与页面主体颜色不同时可以更改