NoticeBar 通告栏

使用指南

在 app.json 或 index.json 中引入notice-bar组件

{
  "usingComponents": {
    "fs-notice-bar": "path/components/notice-bar/index"
  }
}
1
2
3
4
5

代码演示

  • 基础用法
<fs-notice-bar bind:click="click" left-icon="info" text="{{ text }}"/>
1
  • 禁用滚动
<fs-notice-bar scrollable="{{ false }}" text="{{ text }}"/>
1
  • 通告栏样式
<fs-notice-bar mode="closeable" bind:close="close" text="{{ text }}"/>
<fs-notice-bar mode="link" url="/pages/icon/index" text="{{ text }}"/>
1
2
Page({

  /**
   * 页面的初始数据
   */
  data: {
    text: '虽然此次晒照让网友们再次质疑,不过也有网友认为,有医生指导,本人更是表明自己是很久没有玩乐后的一次,没有必要做太强烈批判'
  },
  click (e) {
    console.log(e)
  },
  close (e) {
    console.log(e)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

属性

参数 说明 类型 默认值
text 文本内容 String -
mode 通告栏模式,可选值为 closeable link String -
url 跳转模式时的url String -
delay 动画延迟时间 (s) Number 0
speed 滚动速率 (px/s) Number 50
scrollable 是否在长度溢出时滚动播放 Boolean true
left-icon 左侧图标图标 String -
close-icon 右侧关闭图标 String error
link-icon 右侧链接图标 String right
color 文本颜色 String #ed6a0c
backgroundColor 滚动条背景 String #fffbe8
open-type 微信开发能力 String navigate

事件

event 说明 回调
close 关闭时触发 当前事件对象
click 点击时触发 当前事件对象