更新记录

1.0.0（2025-03-03） 下载此版本

1.0.0

平台兼容性

组件参数说明

barBgColor

• 类型: String
• 必填: 否
• 描述: 顶部标题栏和返回按钮的背景颜色。用于优化滚动时顶部样式问题。

backGroundImg

• 类型: String
• 必填: 否
• 默认值: ""
• 描述: 自定义顶部背景图片的 URL。如果不传，则使用 backgroundColor 作为背景。

showLeftBack

• 类型: Boolean
• 必填: 否
• 默认值: false
• 描述: 是否显示顶部返回按钮。

leftBackFunc

• 类型: Function
• 必填: 否
• 默认值: () => {}
• 描述: 顶部返回按钮的回调函数。默认行为是返回上一页。

height

• 类型: Number
• 必填: 否
• 默认值: 602
• 描述: 自定义顶部背景的高度。

title

• 类型: String
• 必填: 否
• 默认值: ""
• 描述: 自定义顶部标题文本。

backgroundColor

• 类型: String
• 必填: 否
• 默认值: "linear-gradient(180deg, #CEEEF8 0%, #FFFFFF 96.52%)"
• 描述: 自定义顶部背景颜色。支持 CSS 渐变或纯色。

paddingTop

• 类型: Number
• 必填: 否
• 默认值: 120
• 描述: 自定义内容距离顶部的 padding 高度。

marginTop

• 类型: Number
• 必填: 否
• 默认值: uni.getSystemInfoSync().statusBarHeight
• 描述: 自定义内容距离顶部的 margin 高度（单位：px）。默认值为手机系统状态栏高度。如果内容需要到顶，请设置为 0。

示例代码

<StatusBar
  barBgColor="#FFFFFF"
  backGroundImg="https://example.com/background.jpg"
  showLeftBack={true}
  leftBackFunc={() => console.log("返回按钮点击")}
  height={500}
  title="自定义标题"
  backgroundColor="linear-gradient(180deg, #FFCCCC 0%, #FFFFFF 100%)"
  paddingTop={100}
  marginTop={0}
/>