低代码高性能原生UI框架Noticebar 滚动通告栏
组件类型：UxNoticebarComponentPublicInstance
支持水平滚动、垂直翻页，可配置滚动速度、右侧按钮
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| texts | string[] | - | 通告内容 |
| theme | String | primary | 主题颜色 |
| color | String | $ux.Conf.fontColor | 文字颜色 |
| darkColor | String | - | 深色 |
| icon | String | megaphone | 左侧图标 |
| rightIcon | String | - | 右侧图标 |
| iconSize | Number | $ux.Conf.fontSize | 图标尺寸 |
| iconColor | String | $ux.Conf.fontColor | 图标颜色 |
| background | String | $ux.Conf.backgroundColor | 背景颜色 |
| backgroundDark | String | - | 深色 |
| radius | Number | 5 | 圆角 |
| scrollable | Boolean | false | 开启滚动 |
| direction | BooleStringan | 'row' | 滚动方向 |
| speed | Number | 60 | 文字滚动的速度 px/s |
| mutiline | Boolean | false | 是否多行显示，多行则无滚动效果 |
theme
| 值 | 说明 |
|---|---|
| primary | 主色 |
| warning | 警告 |
| success | 成功 |
| error | 错误 |
| info | 文本 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
direction
| 值 | 说明 |
|---|---|
| row | 水平滚动 |
| column | 垂直翻页 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| click | 点击事件 | MouseEvent |
| handle | 点击右侧按钮事件 | MouseEvent |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="滚动通告栏" :bold="true">
<ux-text text="支持水平滚动、垂直翻页，可配置滚动速度、右侧按钮"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="滚动通告栏" text="https://www.uxframe.cn/component/display/noticebar.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-noticebar :texts="[text]"></ux-noticebar>
<ux-noticebar theme="success" :texts="[text]" :mt="10"></ux-noticebar>
<ux-noticebar theme="primary" :texts="[text]" right-icon="cancel" background="red" :mt="10"></ux-noticebar>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="垂直翻页" :bold="true">
<ux-text text="支持垂直翻页" :mb="15"></ux-text>
<ux-col>
<ux-noticebar :texts="texts" direction="col"></ux-noticebar>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="滚动速度" :bold="true">
<ux-text text="支持配置滚动速度" :mb="15"></ux-text>
<ux-col>
<ux-noticebar :texts="texts" direction="col" :speed="120"></ux-noticebar>
<ux-noticebar theme="success" :texts="[text]" :speed="120" :mt="10"></ux-noticebar>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="多行显示" :bold="true">
<ux-text text="支持多行显示，无滚动效果" :mb="15"></ux-text>
<ux-col>
<ux-noticebar :texts="[text]" :mutiline="true" background="#f0f0f0" color="red" icon-color="red"></ux-noticebar>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="滚动通告栏" :bold="true">
<ux-text text="支持水平滚动、垂直翻页，可配置滚动速度、右侧按钮"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="滚动通告栏" text="https://www.uxframe.cn/component/display/noticebar.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-noticebar :texts="[text]"></ux-noticebar>
<ux-noticebar theme="success" :texts="[text]" :mt="10"></ux-noticebar>
<ux-noticebar theme="primary" :texts="[text]" right-icon="cancel" background="red" :mt="10"></ux-noticebar>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="垂直翻页" :bold="true">
<ux-text text="支持垂直翻页" :mb="15"></ux-text>
<ux-col>
<ux-noticebar :texts="texts" direction="col"></ux-noticebar>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="滚动速度" :bold="true">
<ux-text text="支持配置滚动速度" :mb="15"></ux-text>
<ux-col>
<ux-noticebar :texts="texts" direction="col" :speed="120"></ux-noticebar>
<ux-noticebar theme="success" :texts="[text]" :speed="120" :mt="10"></ux-noticebar>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="多行显示" :bold="true">
<ux-text text="支持多行显示，无滚动效果" :mb="15"></ux-text>
<ux-col>
<ux-noticebar :texts="[text]" :mutiline="true" background="#f0f0f0" color="red" icon-color="red"></ux-noticebar>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
const text = 'UxFrame是Uniapp-X 低代码高性能UI框架! 了解详情请访问官网:https://www.uxframe.cn'
const texts = ['UxFrame是Uniapp-X 低代码高性能UI框架! ','了解详情请访问官网:https://www.uxframe.cn']
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
const text = 'UxFrame是Uniapp-X 低代码高性能UI框架! 了解详情请访问官网:https://www.uxframe.cn'
const texts = ['UxFrame是Uniapp-X 低代码高性能UI框架! ','了解详情请访问官网:https://www.uxframe.cn']
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>