通告栏 NoticeBar

滚动播放的消息提示。

是否显示通告栏

通过show属性设置是否显示通告栏。默认值为true。

示例代码

<l-notice-bar show="{{true}}">我是通告栏</l-notice-bar>

通告栏类型

通过type属性设置通告栏类型为still（静止），roll（字幕滚动），swip（轮播）。默认值为still。

当通告栏的类型为swip时，轮播的内容需通过swip-arr属性传入。

示例代码

<l-notice-bar show="{{true}}" 
              type="still">
              我是通告栏</l-notice-bar>
<l-notice-bar show="{{true}}" 
              type="roll">
              我是通告栏我是通告栏我是通告栏我是通告栏
</l-notice-bar>
<l-notice-bar show="{{true}}" 
              type="swip" 
              swip-arr="{{arr}}">
</l-notice-bar>

滚动速度系数

通过设置speed属性可设置字幕滚动速度系数和轮播速度系数。默认值为1500。

注意事项

滚动速度仅在type设置为swip和roll时生效。speed数值越小速度越快，数值越大速度越慢。

示例代码

<l-notice-bar show="{{true}}" 
              type="roll" 
              speed="2000">
    我是通告栏我是通告栏我是通告栏我是通告栏
</l-notice-bar>
<l-notice-bar 
    show="{{true}}" 
    type="swip" 
    swip-arr="{{arr}}" 
    speed="2000">
</l-notice-bar>

通告栏图标

通过front-icon-name设置位于通告栏头部的图标名称。front-icon-size和front-icon-color属性设置头部图标的颜色和大小。

通过end-icon-name设置位于通告栏尾部的图标名称。end-icon-size和end-icon-color属性设置尾部图标的颜色和大小。

示例代码

<l-notice-bar 
    show="{{true}}" 
    type="still" 
    front-icon-name="notification" 
    end-icon-name="close" 
    front-icon-size="20"
    front-icon-color="#3683D6"> 
  我是通告栏
</l-notice-bar>

可关闭通告栏

通过close属性可设置通告栏为可关闭通告栏。默认值为false。

示例代码

<l-notice-bar show="{{true}}" close="{{true}}">我是通告栏</l-notice-bar>

通告栏属性（NoticeBar Attributes）

通告栏事件（NoticeBar Events）