NoticeBar 通告栏
使用指南
在 app.json 或 index.json 中引入notice-bar组件
{
"usingComponents": {
"fs-notice-bar": "path/components/notice-bar/index"
}
}
1
2
3
4
5
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
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
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 | 点击时触发 | 当前事件对象 |