NoticeBar 通告栏

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-notice-bar": "@retailwe/ui-notice-bar/index"
}

代码演示

基础用法

<wr-notice-bar
  left-icon="wr-star-filled"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动"
/>

禁用滚动

文字内容多于一行时，可通过scrollable参数控制是否开启滚动

<wr-notice-bar
  scrollable="false"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动"
/>

多行展示

禁用滚动时，可以设置wrapable来开启多行展示

<wr-notice-bar
  wrapable
  scrollable="false"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动"
/>

使用左右插槽

使用left-icon插槽和right-icon插槽自定义左右固定内容

<wr-notice-bar
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动。"
>
  <text slot="left-icon">[公告]</text>
  <text slot="right-icon">[结束]</text>
</wr-notice-bar>

通告栏模式

默认模式为空，支持closeable和link。

<!-- closeable 模式，在右侧显示关闭按钮 -->
<wr-notice-bar
  mode="closeable"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动。"
/>

<!-- link 模式，在右侧显示链接箭头 -->
<wr-notice-bar
  mode="link"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动。"
/>

自定义滚动速率

使用speed属性控制滚动速率

<wr-notice-bar
  text="{{ text }}"
  speed="{{speedValue}}"
  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
/>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------------- | ---------------------------------------------------- | --------- | ---------- | ---- | | mode | 通告栏模式，可选值为 closeable link | string | '' | - | | delay | 动画延迟时间 (s) | number | 1 | - | | speed | 滚动速率 (px/s) | number | 50 | - | | scrollable | 是否在长度溢出时滚动播放 | boolean | true | - | | left-icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | string | - | - | | color | 文本颜色 | string | #ed6a0c | - | | backgroundColor | 滚动条背景 | string | #fffbe8 | - | | open-type | 微信开放能力 | string | navigate | - |

Events

| 事件名 | 说明 | 参数 | | ---------- | ------------ | ---- | | bind:click | 点击事件回调 | - |

Slot

| 名称 | 说明 | | ---------- | ------------------ | | left-icon | 自定义左侧固定内容 | | right-icon | 自定义右侧固定内容 |

外部样式类

| 类名 | 说明 | | ------------ | ------------ | | custom-class | 根节点样式类 |