mosowe-navigation-bar 顶部状态栏

uniapp/uni_modules组件

下载地址

TIP

1. 组件应放于页面标签内，否则默认sticky情况下滚动页面可能会移出屏幕（APP复现）
2. 双击标题栏文案可回到顶部
3. 自定义左右侧按钮的宽高为48rpx

兼容性

平台	android	ios	微信小程序	H5
兼容	√	√	√	√

props

属性	类型	说明	默认
title	string	页面标题	-
color	string	标题/图标颜色，rgb / 十六进制	#131936
background	string	背景色,rgb / 十六进制 / none	#ffffff
transparent	boolean	是否默认背景透明且通过页面滚动渐变展示，调用页面需声明onPageScroll(() => {})生命周期，开启后页面滚动时背景文案会渐变为默认的白底黑字	false
defaultHideTitle	boolean	默认是否隐藏标题	false
defaultHideBtn	boolean	隐藏左侧默认按钮，即后退和首页按钮	false
home	boolean	强制显示返回首页按钮	false
fixed	boolean	是否固定屏幕顶部，默认是sticky吸顶	false
customBack	Function	自定义回退拦截事件，参数为按钮类型：(type:'back'|'home')=>void

slots

slot	说明
default	标题栏插槽
left	标题栏左侧插槽，默认回退图标存在情况下，添加尺寸为48*48rpx，间距为16rpx时可以有两个图标按钮，左侧按钮区总宽度为200rpx
right	标题栏右侧插槽，图标为48*48rpx，间距为16rpx时可以添加三个图标按钮，在小程序端不生效，因为存在胶囊按钮，右侧按钮区总宽度为200rpx
back	默认按钮插槽，即back/home按钮区插槽，作用域参数：{showHome：boolean}

示例代码

<mosowe-navigation-bar
  title="标题"
  transparent
  defaultHideTitle
>
</mosowe-navigation-bar>

贡献者

mosowe