NoticeBar 公告

预览

01:38



---

组件名：rice-notice-bar

用于循环播放展示一组消息通知

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过 message 设置消息内容，通过 left-icon 设置左侧的图标

<rice-notice-bar message="无语，秋风和老去的誓言，灰色的日子慢慢过去，骄阳无忌，人如黄花。夕阳西下几时回。" left-icon="volume"></rice-notice-bar>

主题颜色

NoticeBar 支持四种主题色，通过 type 设置 ，默认为 warning。可选 primary success error

<rice-notice-bar type="primary" message="人生三大幻觉‌：明天开始努力，今天一定早睡，再买我就剁手，说的是不是你"
left-icon="help-fill"></rice-notice-bar>

<rice-notice-bar type="success" message="穷与富的差距‌：只要你非常努力，总有一天你会发现，你永远无法拉近你跟有钱人的差距。‌‌"
left-icon="checked-circle-fill"></rice-notice-bar>

<rice-notice-bar type="error" message="上学时总盼望着不念了，但毕了业才知道，有一种作业叫加班，有一种自习叫进修，有一种分数叫工资。‌‌"
left-icon="info-fill"></rice-notice-bar>

滚动播放

scrollable 为 true 即可实现滚动播放，默认情况下内容长度溢出时默认开启，wrapable为 true 时恒关闭

<rice-notice-bar scrollable message="夕阳西下，断肠人在天涯"></rice-notice-bar>

禁止滚动

scrollable 为 false 时，消息不会滚动，超出部分会显示省略号

<rice-notice-bar :scrollable="false" message="无论花开得多么绚烂，人总会将其摧毁。但是无论如何摧残，我们都会再种下花朵。而这就是我们的战斗。"></rice-notice-bar>

多行展示

wrapable 设置为 true 即可换行展示

<rice-notice-bar wrapable
message="其实真正的有钱人是很低调的，外表是看不出来的，就拿我来说，虽然我经常骑个破自行车上街，但谁又会知道其实我家里，还有一辆电动车"></rice-notice-bar>

滚动速度

通过 speed 可以设置滚动速度

<rice-notice-bar scrollable message="考数学就像医生给垂死的病人做手术，反正出来第一句是我尽力了。‌‌" :speed="90"></rice-notice-bar>

延迟时间

设置 delay 可以延迟滚动开始的时间

<rice-notice-bar scrollable message="虽然20秒后才开始滚动，但我的心早已开始滚烫" :delay="20"></rice-notice-bar>

可关闭

设置 closeable 为 true 在右侧会显示关闭的图标，点击会关闭该条消息

<rice-notice-bar message="我养了一只猫，它不吃肉，只吃白菜。我养了一只猫，它不吃肉，只吃白菜。" closeable></rice-notice-bar>

自定义样式

• bg-color 可以设置通知栏的背景色
• color 可以设置文字的颜色

<rice-notice-bar message="猪虽逊羊三分白，羊却输猪肥又香。" scrollable bg-color="#f2f3ff" color="#323233"
			right-icon="arrow-right"></rice-notice-bar>

自定义插槽

<rice-notice-bar message="给我眼罩,我也能成为忍者神龟。" scrollable>
  <template #rightIcon>
    <!-- #ifdef MP -->
    <view class="flex">
    <!-- #endif -->
      <text class="right-slot">查看</text>
      <rice-icon name="arrow-right" color="#323233" />
    <!-- #ifdef MP -->
    </view>
    <!-- #endif -->
  </template>
</rice-notice-bar>

API

Props

属性名	类型	说明	默认值
type	String	通知类型，可选值：primary、warning、success、error	warning
message	String	通知文本内容	-
color	String	通知文本颜色	-
font-size	String	通知文本大小	-
bg-color	String	背景颜色	-
left-icon	String	左侧图标名称	-
right-icon	String	右侧图标名称	-
delay	Number	动画延迟时间，单位s	-
speed	Number	滚动速度，单位ms	-
closeable	Boolean	是否可关闭	-
scrollable	Boolean	是否开启滚动播放，内容长度溢出时默认开启，wrapable为 true 时恒关闭	-
wrapable	Boolean	是否开启文本换行，开启文本换行后，内容恒不会滚动	-
custom-style	Object	自定义样式	-

Events

事件名	说明	回调参数
click	点击通知栏时触发	-
clickLeft	点击左侧图标时触发	-
clickRight	点击右侧图标时触发	-

Slot

名称	说明
leftIcon	自定义左侧图标
rightIcon	自定义右侧图标

类型定义

组件导出如下类型

// 组件类型
const noticeBarSheetRef = ref<RiceNoticeBarComponentPublicInstance | null>(null)