Noticebar 通告栏

使用指南

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-noticebar": "path/to/zanui-weapp/dist/noticebar/index"
  4.   }
  5. }

在 index.js 中声明组件数据

  1. // 在 Page 中声明 Noticebar 依赖的展示数据
  2. Page({
  3.   data: {
  4.     text: 'xxx',
  5.     scrollable: 'xxx',
  6.     ...
  7.   }
  8. })

代码演示

Noticebar 组件支持滚动和静止两种展示方式，通过 text 传入展示文案

静止公告栏

  1. <zan-noticebar
  2.   text="{{ text }}"
  3. />

滚动通告栏

  1. <zan-noticebar
  2.   text="{{ text }}"
  3.   scrollable="true"
  4. />

延时滚动通告栏

  1. <zan-noticebar
  2.   text="{{ text }}"
  3.   scrollable="true"
  4.   delay="{{ delay }}"
  5. />

改变滚动通告栏滚动速度

  1. <zan-noticebar
  2.   text="{{ text }}"
  3.   scrollable="true"
  4.   speed="{{ speed }}"
  5. />

自定义通告栏字体颜色和背景色

  1. <zan-noticebar
  2.   text="{{ text }}"
  3.   color="{{ color }}"
  4.   background-color="{{ backgroundColor }}"
  5. />

添加左侧icon通告栏

  1. <zan-noticebar
  2.   text="{{ text }}"
  3.   left-icon="https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
  4. />

可关闭通告栏

  1. <zan-noticebar
  2.   text="{{ text }}"
  3.   mode="closeable"
  4. />
参数 说明 类型 默认值 可选值
text 通告栏展示文案 String -
mode 通告栏模式 String '' closeable
delay 滚动延时时间 Number 0
speed 滚动速度 Number 40
scrollable 是否可滚动 Boolean false
leftIcon 左侧图标 String -
color 通告栏字体颜色 String #f60
backgroundColor 通告栏背景色 String #fff7cc

Noticebar 通告栏 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/view/noticebar