title: 通告栏 NoticeBar

通告栏 NoticeBar

滚动播放的消息提示。

是否显示通告栏

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

:::img :::

示例代码

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

通告栏类型

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

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

:::img :::

示例代码

<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。

::: tip 注意事项 滚动速度仅在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属性设置尾部图标的颜色和大小。

:::img :::

示例代码

<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>

动态修改通告栏内容

如果你的通告栏内容不是写死在 wxml 文件中，而是在运行过程中会动态修改的（比如通过 API 请求修改通告栏内容），那么你需要在修改通告栏内容之后调用 linFlush() 开放函数刷新一下，通告栏滚动动画才会正常显示。

示例代码

<l-notice-bar id="my-notice-bar">{{content}}<l-notice-bar/>

getNoticeBar(){
  // 模拟 API 获取内容
  let apiContent = wx.request("...");
  this.setData({
    content: apiContent
  },()=>{
    // 获取 notice-bar 组件实例
    const noticeBarComponent = this.selectComponent("#my-notice-bar");
    // 刷新组件动画
    noticeBarComponent.linFlush();
  });
}

通告栏属性

通告栏外部样式类

通告栏事件

开放函数