NoticeBar 通告栏

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-notice-bar": "path/to/vant-weapp/dist/notice-bar/index"
  3. }

代码演示

基础用法

  1. <van-notice-bar
  2.   left-icon="https://img.yzcdn.cn/1.png"
  3.   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
  4. />

禁用滚动

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

  1. <van-notice-bar
  2.   scrollable="false"
  3.   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
  4. />

通告栏模式

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

  1. <!-- closeable 模式，在右侧显示关闭按钮 -->
  2. <van-notice-bar
  3.   mode="closeable"
  4.   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
  5. />
  7. <!-- link 模式，在右侧显示链接箭头 -->
  8. <van-notice-bar
  9.   mode="link"
  10.   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
  11. />

API

参数说明类型默认值
mode通告栏模式，可选值为 closeable linkString''
delay动画延迟时间 (s)Number1
speed滚动速率 (px/s)Number50
scrollable是否在长度溢出时滚动播放Booleantrue
left-icon左侧图标图片 URLString-
color文本颜色String#ed6a0c
backgroundColor滚动条背景String#fffbe8
open-type微信开放能力Stringnavigate

Event

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

外部样式类

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

更新日志

版本类型内容
0.0.1feature新增组件

原文: https://youzan.github.io/vant-weapp/#/notice-bar