NoticeBar 通知栏

引入

基础用法

通过 属性设置通知栏的内容,通过 left-icon 属性设置通知栏左侧的图标。

  1. <van-notice-bar
  2. left-icon="volume-o"
  3. text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放,通过 scrollable 属性可以控制该行为。

  1. <van-notice-bar
  2. wrapable
  3. :scrollable="false"
  4. text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
  5. />

通知栏模式

通知栏支持 和 link 两种模式。

自定义样式

通过 color 属性设置文本颜色,通过 background 属性设置背景色。

  1. <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
  2. 技术是开发它的人的共同灵魂。
  3. </van-notice-bar>

垂直滚动

API

Events

Slots

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考。