更新记录

1.0.0（2025-12-07） 下载此版本

appx-notice-bar 是基于 uniappx 开发的通用通告栏组件，用于展示系统通知、活动提醒等轻量提示信息。组件保留核心交互能力（关闭按钮、基础样式自定义），移除了滚动动画相关逻辑（仅保留兼容参数），具备样式高度可定制、交互简洁的特点，适配多端展示。

平台兼容性

uni-app x(4.87)

appx-notice-bar 通告栏组件

组件介绍

appx-notice-bar 是基于 uniappx 开发的通用通告栏组件，用于展示系统通知、活动提醒等轻量提示信息。组件保留核心交互能力（关闭按钮、基础样式自定义），移除了滚动动画相关逻辑（仅保留兼容参数），具备样式高度可定制、交互简洁的特点，适配多端展示。

组件属性（Props）

组件事件

基础使用示例

<template>
  <appx-notice-bar 
    text="这是一条普通的通告栏提示信息"
    @close="handleNoticeClose"
  />
</template>

<script lang="uts" setup>
const handleNoticeClose = () => {
  console.log('通告栏已关闭');
};
</script>

自定义样式示例

<template>
  <appx-notice-bar 
    text="自定义样式的通告栏"
    bgColor="#E8F4F8"
    textColor="#1890FF"
    icon="🔔"
    iconColor="#1890FF"
    closeColor="#1890FF"
    :containerStyle="{ borderRadius: '8px' }"
    :contentStyle="{ fontWeight: 'bold' }"
  />
</template>

禁用关闭按钮示例

<template>
  <appx-notice-bar 
    text="无关闭按钮的通告栏"
    showClose="false"
  />
</template>

禁用左侧图标示例

<template>
  <appx-notice-bar 
    text="无左侧图标的通告栏"
    showIcon="false"
  />
</template>

样式字符串传入示例

<template>
  <appx-notice-bar 
    text="样式字符串自定义示例"
    containerStyle="{'border': '1px solid #FF6600', 'margin': '10px 0'}"
  />
</template>

注意事项

1. 组件兼容布尔值/数字类型的属性传入字符串形式（如showIcon="false"），内部会自动解析；
2. 自定义样式传入字符串时，需保证格式接近JSON（组件会自动替换单引号为双引号、补全属性名引号），解析失败会默认使用空样式；
3. 尺寸类属性传入数字时，会自动拼接px单位，如需使用其他单位（如rpx、rem），请传入字符串形式；
4. 滚动相关属性仅做兼容保留，无实际功能，如需滚动效果需自行扩展；
5. 关闭按钮点击后会隐藏整个通告栏，如需重新显示可通过父组件控制组件的v-show/v-if。