学习日记-微信小程序自定义顶部导航栏

实现自定义顶部导航栏需要借助两个微信api
let custom = wx.getMenuButtonBoundingClientRect();
获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
let { windowWidth } = wx.getSystemInfoSync()
获取设备信息
把代码贴下面了，希望能给一些小小小小小白们带来一些灵感吧

在app.js onLaunch中计算出顶部栏的位置

App({
     
  onLaunch: function () {
     
    let custom = wx.getMenuButtonBoundingClientRect();//菜单按钮
    let {
      windowWidth } = wx.getSystemInfoSync()
    this.globalData.navTopBar = {
     
      //整体顶部高度
      customBar: custom.bottom + 10,
      //工具栏定位
      navTop: custom.top,
      //工具栏宽
      topWdith: windowWidth - (windowWidth - custom.left),
      //工具栏高
      topHeight: custom.bottom - custom.top,
      //标题容器宽度
      titleWdith: windowWidth - (windowWidth - custom.left) * 2,
      //返回按钮容器宽度
      btnWdith: windowWidth - custom.left,
      //返回按钮容器padding
      btnPadd: windowWidth - custom.right
    }
	//注意以上结果单位全部为px！！
  },
  globalData: {
     
    navTopBar:{
     }
  }
})

组件wxml代码主要就是一些简单的布局

<view class="nav-box" style="height:{
        {
        customBar}}px;">
  <view class="nav-top" style="top:{
        {
        navTop}}px;width:{
        {
        topWdith}}px;height:{
        {
        topHeight}}px">
    
    <view class="nav-btn" style="height:100%;width:{
        {
        btnWdith}}px;padding-left:{
        {
        btnPadd}}px">
      <view class="nav-btn-item" wx:if="{
      {isBtn}}" hover-class="none" hover-stop-propagation="false" style="width:{
        {
        btnWdith-btnPadd}}px;border-radius: {
        {
        topHeight/2}}px;">
        <view class="nav-btn-img" catchtap="back">
          <image src="/images/back1.png" mode="heightFix" >image>
        view>
        <view class="nav-btn-view">
        view>
        <view class="nav-btn-img" catchtap="home">
          <image  src="/images/home1.png" mode="heightFix" >image>
        view>
      view>
    view>
    
    <view class="nav-title" style="height:100%;width:{
        {
        titleWdith}}px">首页view>
  view>
view>

<view style="height:{
        {
        customBar}}px;">view>

组件js部分

// components/topBar/topBar.js
const app = getApp();
Component({
     
  /**
   * 组件的属性列表
   */
  properties: {
     
  	//参数是否展示返回按钮
    isBtn: {
     
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
     
    ...app.globalData.navTopBar
  },

  /**
   * 组件的方法列表
   */
  methods: {
     
    back() {
     
      console.log("返回")
      let pages = getCurrentPages()
      console.log(pages)
      if (pages.length >= 2) {
     
        wx.navigateBack({
     
          delta: 1,
        })
      }

    }, home() {
     
      console.log("去首页")
      wx.redirectTo({
     
        url: '/pages/index/index',
      })
    }
  }
})

css部分

view, scroll-view, swiper, button, input, textarea, label, navigator, image {
     
  box-sizing: border-box;
}
.nav-box{
     
  background: #1e52d8;
  color: aliceblue;
  width: 750rpx;
  position: relative;
  display: flex;
  position: fixed;
  top:0;
  z-index:999;
}
.nav-top{
     
  position: absolute;
  display: flex;
}
.nav-title{
     
  display: flex;
  justify-content: center;
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.nav-btn{
     
  display: flex;
  align-items: center;
}
.nav-btn-item{
     
  flex: 1;
  display: flex;
  height: 100%;
  background-color:rgb(248, 248, 248,0.5);
  align-items: center;
  justify-content: space-around;
}
.nav-btn-img{
     
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-btn-img image{
     
  height: 70%;
}
.nav-btn-view{
     
  height: 50%;
  border-left: 1rpx solid rgb(248, 248, 248,0.8);
}