更新记录

1.0.3（2023-05-13） 下载此版本

去除vue实验性ref语法糖

1.0.2（2023-04-21） 下载此版本

增加说明、优化组件

1.0.1（2023-04-21） 下载此版本

增加使用示例说明，并优化左侧返回事件体验

平台兼容性

geek-header

一款自定义导航栏，为您省去复杂的手机状态高度计算和小程序胶囊对不齐的问题。使用它，您无需再为多端适配而浪费精力。虽然性能不如原生导航栏，但它比原生更加灵活且功能更加强大。

使用方法

从插件市场直接使用HBuilderX 导入即可直接快速使用。

基本使用

默认标题会与pages.json中的navigationBarTitleText的属性一致

<view>
    <geek-header></geek-header>
</view>

白色箭头

如需使用白色箭头可使用whiteback属性 如果没有设置titleColor(标题颜色)属性 则 会变成白色 如果没有设置bgColor(导航栏背景色)属性 则 会变成透明色

<view>
    <geek-header whiteback></geek-header>
</view>

不使用返回箭头(左侧内容)

如果不需要返回箭头则可以使用noLeft属性来取消

<view>
    <geek-header noLeft></geek-header>
</view>

导航栏背景色

可以bgColor属性来自定义导航栏的背景色

<view>
    <geek-header bgColor="rgba(0, 0, 0, 0)"></geek-header>
</view>

防止塌陷

考虑到有时候编写的内容需要在标题部分生成一块同高度的元素来防止塌陷，这时可以使用placeholder属性来实现这个效果

<view>
    <geek-header placeholder></geek-header>
</view>

自定义导航栏插槽使用

有三种插槽left、center、right分别对应插槽的三个位置可自行使用

API

Props

Event

Slot