小程序原生顶部导航栏

可以直接调整为vue组件

实例图：

wly-nav-bar.wxml

<view class="wly-nav-bar {{custom_class ? custom_class:''}}"
  style="{{statusBarHeight ? 'padding-top:'+statusBarHeight+'px;':''}} {{z_index ? 'z-index:'+z_index+';':''}}  {{back_color ? 'background:'+back_color+';':''}} {{wly_nav_bar_style?wly_nav_bar_style:''}}">
  <view class="wly-cell wly-left" bind:tap="onClickLeft">
    <image style="width:56rpx;height:56rpx;{{left_icon_style?left_icon_style:''}}" src="{{left_icon}}" />
  </view>
  <view class="wly-cell middle" style="{{title_style?title_style:''}}">{{title}}</view>
  <view class="wly-cell wly-right"></view>
</view>

wly-nav-bar.js

// components/wly-nav-bar/wly-nav-bar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 顶部安全距离
    statusBarHeight: {
      type: [Number, String],
      value: 0
    },
    // 盒子自定义样式
    wly_nav_bar_style: {
      type: String,
      value: ''
    },
    // 标题
    title: {
      type: String,
      value: ''
    },
    // 标题样式
    title_style: {
      type: String,
      value: ''
    },
    // 左边图标地址
    left_icon: {
      type: String,
      value: 'https://zjjncdn.maihuominiapps.com/goods/2023/06/649b902f3ea28.png'
    },
    // 左边图标样式
    left_icon_style: {
      type: String,
      value: ''
    },
    // 背景色
    back_color: {
      type: String,
      value: '#fff'
    },
    // 层级
    z_index: {
      type: Number,
      value: 1
    },
    // 自定义样式类
    custom_class: {
      type: String,
      value: ''
    },
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

    // 	点击左侧按钮时触发  bind:click-left
    onClickLeft() {
      this.triggerEvent('click-left');
    },
  }
})

wly-nav-bar.wxss

.wly-nav-bar {
  position: sticky;
  top: 0;
  left: 0;
  min-height: 32px;
  padding-bottom: 20rpx;
  padding-left: 24rpx;
  padding-right: 24rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: content-box;
}

.wly-nav-bar .wly-cell {
  width: 100%;
}

.wly-nav-bar .wly-left {
  width: 200rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wly-nav-bar .middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wly-nav-bar .wly-right {
  width: 200rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}