NoticeBar 通告栏

介绍

一般用于顶部循环播报消息。

使用指南

一般用法

<tms-notice-bar message="MESSAGE"/>

固定在顶部

<tms-notice-bar message="MESSAGE" fixed/>

开启换行

<tms-notice-bar message="MESSAGE" wrap/>

禁止滚动

<tms-notice-bar message="MESSAGE" allowScroll="{{false}}"/>

右侧slot

<tms-notice-bar message="MESSAGE">
    <button slot="right-slot">添加</button>
</tms-notice-bar>

自定义样式

<tms-notice-bar message="MESSAGE" message-style="font-size:36rpx;"
                root-style="background:rgb(226, 249, 255);color:rgb(28, 147, 250);"/>

API

属性	说明	类型	默认值	版本
message	滚动区域内容	string	''
speed	滚动速度,每秒移动像素值。	number	40
allow-scroll	是否超出长度时自动滚动	boolean	true
wrap	是否超出长度时换行(不滚动)	boolean	false
hide-close-icon	是否隐藏右侧关闭图标	boolean	false
message-style	自定义滚动文字样式	string	''
root-style	自定义容器样式	string	''
fixed	是否自动固定在屏幕顶部	boolean	false
fixed-under-bar	自动定位时，尝试定位到胶囊下方	boolean	true
fixed-place-height	自动定位时，是否占用对应的文档流高度	boolean	false

left-icon/right-icon的使用参考icon组件。

EVENTS

属性	说明	类型
bind:on-click-close-icon	点击关闭图标事件	(event) => {}
bind:on-click-message	点击中部文字事件	(event) => {}

插槽

值	说明
right-slot	插入到通知条右侧
left-slot	插入到通知条左侧

CSS变量

// 背景色
--notice-bar-primary-background: linear-gradient(270deg, #E5EFFF 0%, #DDEAFF 100%);
// 文字颜色
--notice-bar-primary-color: #4F71A9;
// 文字大小
--notice-bar-font-size: 26rpx;
// 通知条最小高度
--notice-bar-min-height: 80rpx;
// 自动定位模式下z-index
--notice-bar-z-index: 990;
// 关闭图标大小
--notice-bar-close-icon-size: 40rpx;

FAQ