通告栏 NoticeBar

滚动播放的消息提示。

是否显示通告栏

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

通告栏

示例代码

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

通告栏类型

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

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

通告栏图标

示例代码

  1. <l-notice-bar show="{{true}}"
  2. type="still">
  3. 我是通告栏</l-notice-bar>
  4. <l-notice-bar show="{{true}}"
  5. type="roll">
  6. 我是通告栏我是通告栏我是通告栏我是通告栏
  7. </l-notice-bar>
  8. <l-notice-bar show="{{true}}"
  9. type="swip"
  10. swip-arr="{{arr}}">
  11. </l-notice-bar>

滚动速度系数

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

注意事项

滚动速度仅在type设置为swiproll时生效。speed数值越小速度越快,数值越大速度越慢。

示例代码

  1. <l-notice-bar show="{{true}}"
  2. type="roll"
  3. speed="2000">
  4. 我是通告栏我是通告栏我是通告栏我是通告栏
  5. </l-notice-bar>
  6. <l-notice-bar
  7. show="{{true}}"
  8. type="swip"
  9. swip-arr="{{arr}}"
  10. speed="2000">
  11. </l-notice-bar>

通告栏图标

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

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

通告栏图标

示例代码

  1. <l-notice-bar
  2. show="{{true}}"
  3. type="still"
  4. front-icon-name="notification"
  5. end-icon-name="close"
  6. front-icon-size="20"
  7. front-icon-color="#3683D6">
  8. 我是通告栏
  9. </l-notice-bar>

可关闭通告栏

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

示例代码

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

通告栏属性(NoticeBar Attributes)

参数说明类型可选值默认值
show是否显示通告栏Boolean——true
type通告栏类型Stringstill/swip/rollstill
speed轮播(滚动)速度Number——1500
swip-arr轮播内容Array—-—-
close可关闭通告栏Boolean—-false
front-icon-name通告栏头部图标名称String—-—-
front-icon-size通告栏头部图标大小Number—-—-
front-icon-color通告栏头部图标颜色String—-—-
end-icon-name通告栏尾部图标名称String—-—-
end-icon-size通告栏尾部图标大小Number—-—-
end-icon-color通告栏尾部图标颜色String—-—-

通告栏外部样式类 (NoticeBar ExternalClasses)

外部样式类名说明备注
l-class覆盖通告栏区域的自定义外部样式类—-
l-icon-class覆盖通告栏图标的自定义外部样式类—-

通告栏事件(NoticeBar Events)

事件名称说明返回值备注
bind:lintap点击通告栏信息触发的事件e.detail.indextypeswip时有返回值
bind:linicontap点击通告栏文字后的图标触发的事件—-—-