@retailwe/ui-notice-bar NPM

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