NoticeBar 通知栏

此组件模态框一般用于弹出提示信息，让用户确认下一步的操作或者提示用户操作结果。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 通过 list 数组属性设置需要滚动的内
• 滚动 mode 属性有两种模式，分别是 row 水平滚动、column 垂直滚动，其中水平滚动又可以通过 circular 属性设置衔接滚动 true 还是步进滚动 false，衔接滚动会把 list 数组元素拼接成一个字符串形式进行滚动，步进滚动模式类似轮播图水平滚动的形式，具体效果请见示例：

<template>
    <fu-notice-bar :list="list" mode="row"></fu-notice-bar>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const list = reactive([
        'F‌融万象启新程',
        'U‌拓鸿图破浪行'
    ]);
</script>

设置图标

• 通过 leftIcon 属性设置是否显示左侧图标，默认显示
• 通过 leftIconName 属性设置左侧图标名称，参考 Icons 图标 组件 默认 volume
• 通过 rightIcon 属性设置是否显示右侧图标，默认不显示
• 通过 rightIconName 属性设置右侧图标名称，参考 Icons 图标 组件 默认 right

<fu-notice-bar :list="list" :leftIcon="false"></fu-notice-bar>

<fu-notice-bar :list="list" :rightIcon="false"></fu-notice-bar>

<fu-notice-bar :list="list" :leftIconName="calendar"></fu-notice-bar>

设置滚动速度

• 属性 mode 为 column 垂直滚动，或者 mode 为 row 水平滚动且 circular 为 false 时，两者都可视为 "步进" 滚动模式，此时可通过 duration 设置滚动周期时长，单位为 ms
• 属性 mode 为 row 水平滚动且 circular 为 true 时，可视为 "水平衔接滚动"，此时 fusions-ui 加入了一个滚动因子参数，可确保在任意多内容的情况下，滚动速度恒定不变，可以通过 speed 属性设置每秒滚动的距离，单位为 px

<fu-notice-bar :list="list" mode="column" duration="2500"></fu-notice-bar>

<fu-notice-bar :list="list" mode="column" circular="false" duration="2500"></fu-notice-bar>

<fu-notice-bar :list="list" mode="column" circular="true" speed="200"></fu-notice-bar>

API

NoticeBar Props

属性名	说明	类型	默认值	可选值
list	滚动内容，数组形式，详见上方基础用法	Array	-	-
show	是否显示通知栏	Boolean	true	false
radius	通知栏圆角	String｜Number	0	-
autoPlay	是否自动播放滚动通告	Boolean	true	false
mode	滚动模式，可选值为 row 水平滚动、column 垂直滚动	String	row	column
circular	是否衔接滚动，仅在 mode 为 row 水平滚动时有效	Boolean	true	false
speed	滚动周期时长，只对步进器有效，横向衔接模式无效，单位ms	Number	80	-
autoHidden	没有数据时是否显示通知栏	Boolean	true	false
leftIcon	是否显示左侧图标	Boolean	true	false
leftIconName	左侧图标名称	String	volume	-
leftIconSize	左侧图标大小	String	20	-
rightIcon	是否显示右侧图标	Boolean	false	false
rightIconName	右侧图标名称	String	right	-
rightIconSize	右侧图标大小	String	20	-
duration	滚动周期时长，单位ms	Number	2000	-
color	通知栏文字颜色	String	#333333	-
size	通知栏文字大小	String	14	-

NoticeBar Events

事件名	说明	回调参数
click	点击通告时触发	() => void
clickRight	点击右侧图标触发	() => void
end	列表的消息每次被播放一个周期时触发，只有 mode 为 column 时有效	() => void