微信小程序组件 自定义导航

效果图👇（_{很粗糙爸特是好用的基础类导航。背景色可调，title可调，箭头颜色可调。返回上页的icon也可以换啦不过没有设置，道理是一样的}~）

自定义导航栏.png

首先，将组件（navigation）内的样式写好先~
以下是navigation.wxml内容 ↓

<!-- 出现了许多许多变量，稍后在js文件中会有详细注释。其中van-icon可以替换成其它尼萌喜欢的图标，也可以根据进入不同页面设置成动态的 -->

<view class="nav_container" style="height: {{navHeight*2}}rpx; background: {{backgroundColor}};color: {{fontColor}}; font-size: {{fontSize}}rpx;">
  <view class="content_container" style="height: {{titleHeight*2}}rpx; top: {{top*2}}rpx;">
    <van-icon name="arrow-left" size="22" class="arrow" bindtap="handleBack" style=" left: {{left*2}}rpx;" />
    <view class="title">{{navTitle}}</view>
  </view>
</view>

navigation.wxss内容 ↓

.nav_container {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  /* 如果碰到项目中使用了类似echart的引入组件，它的层级会比较高爸特我们必须保证导航的层级最高
  所以设置了z-index: 2222 */
  z-index: 2222;
}

.content_container {
  width: 100%;
  position: relative;
}

/* title居中。上下  左右 */
.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
/* arrow 上下居中。left的数据根据设备不同放在动态style里进行配置 */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

navigation.json内容 ↓ (只多出来一个icon的引入，左侧的小箭头)

{
  "component": true,
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index"
  }
}

重点js来啦~~~~

Component({
  /**
   * 组件的属性列表：
   * navTitle: 导航名称
   * backGroundColor：导航栏背景颜色，默认为白色
   * fontColor：导航栏名称字体颜色，默认为黑色
   * fontSize：导航栏名称字体大小，默认28rpx
   */
  properties: {
    navTitle: {
      type: String,
      value: ""
    },
    backgroundColor: {
      type: String,
      value: "white"
    },
    fontColor: {
      type: String,
      value: "black"
    },
    fontSize: {
      type: String,
      value: "28"
    }
  },

  /**
   * 组件的初始数据：私有数据，用于模板渲染
   * spaceTB：胶囊至导航栏底部的距离
   * spaceLR：胶囊至导航栏右侧的距离
   * titleHeight：title的height。。。。
   * navHeight：导航栏高度
   */
  data: {
    spaceTB: "",
    spaceLR: "",
    titleHeight: "",
    top: "",
    navHeight: ""
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleBack() {
      this.triggerEvent("handleBack");
    }
  },
  lifetimes: {  // 生命周期函数
    attached: function() {  // 调用组件
      let timeC = null;
      let clientWidth = null;
      wx.getSystemInfo({  // 获取设备信息
        success: (result) => {
          clientWidth = result.screenWidth; // 设备屏幕宽度
          timeC = result.statusBarHeight;  // 信号、时间、电量,那一栏窄窄的区域高度
        },
      })
      // 右侧胶囊的位置信息，以屏幕左上点为基准
      // 官网可查，不过也是妹有详细信息而已哈哈哈哈哈哈
      let capsule = wx.getMenuButtonBoundingClientRect(); 
      console.log(capsule,"capsule")  

      let spaceTB = capsule.top - timeC;
      let spaceLR = clientWidth - capsule.right;
      // +2 ---- 胶囊的border，4这个数值是猜的。。。。边框为2px
      let navHeight = timeC + capsule.height + spaceTB*2 + 4;

      let top = capsule.top + 1;
      let titleHeight = capsule.height;
    
      this.setData({
        navHeight,
        spaceTB,
        spaceLR,
        top,
        titleHeight,
        left: spaceLR
      })
    }
  }
})

手绘nav数据.jpg

下面说明在父组件中的使用~
父组件.json ↓ （将component引入进来，navigationStyle设置为“custom”，即自定义）

{
  "usingComponents": {
    "nav": "../../pages/common/navigation/navigation"
  },
  "navigationStyle": "custom"
}

父组件.wxml ↓ （都是语义化，就不一一解释啦）

<view>
  <nav id="nav" navTitle="{{navTitle}}" bind:handleBack="handleBack" backgroundColor="#04DECB" fontColor="white"></nav>
  <!-- 以下是父组件中的其它内容，涉及到导航栏数据的是动态的margin -->
  <view class="container_tostayout" style="margin: {{containerTop}}rpx 0 0 0;">
  </view>
</view>

父组件.js ↓ （需要根据页面不同进行赋值的变量）

Page({
  /**
   * 页面的初始数据
   */
  data: {
    navTitle: "",
    containerTop: ""
  },
  onShow: function () {
    this.nav = this.selectComponent('#nav');
    this.setData({
      navTitle: '自定义title',
      containerTop: this.nav.data.navHeight * 2 + 20
    })
  },
  // 与上篇不同的下划线，约定俗成组件内的方法都加_以区分其它方法，不过对功能妹有影响
  handleBack() {
    wx.navigateBack({
      delta: 1
    })
  },
})

父组件中的wxss没进行太多设置。
之前用系统的导航栏，页面高度会从导航栏下面自动算起。使用自定义导航栏后，导航栏需要我们自己固定在页面头部，所以余下的内容也需要进行一些简单的变化。就不放啦~~

tada~_{一个微信小程序的自定义导航栏就完成啦}