mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
小莫唐尼
88 lines
3.2 KiB
Markdown
88 lines
3.2 KiB
Markdown
# uni-notice-bar
|
|
|
|
## Instructions
|
|
|
|
组件名：uni-notice-bar
|
|
|
|
代码块： uNoticeBar
|
|
|
|
点击下载&安装
|
|
|
|
### Syntax
|
|
|
|
- 使用 `<uni-notice-bar />`（或 `<uni-notice-bar></uni-notice-bar>`，当需要包裹子节点时）。
|
|
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
|
|
|
#### Properties
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
| --- | --- | --- | --- |
|
|
| speed | Number | 100 | 文字滚动的速度，默认100px/秒 |
|
|
| text | String | - | 显示文字 |
|
|
| background-color | String | #fffbe8 | 背景颜色 |
|
|
| color | String | #de8c17 | 文字颜色 |
|
|
| moreColor | String | #999999 | 查看更多文字的颜色 |
|
|
| moreText | String | - | 设置“查看更多”的文本 |
|
|
| single | Boolean | false | 是否单行 |
|
|
| scrollable | Boolean | false | 是否滚动，为true时，NoticeBar为单行 |
|
|
| showIcon | Boolean | false | 是否显示左侧喇叭图标 |
|
|
| showClose | Boolean | false | 是否显示右侧关闭按钮 |
|
|
| showGetMore | Boolean | false | 是否显示右侧查看更多图标，为true时，NoticeBar为单行 |
|
|
|
|
#### Events
|
|
|
|
| 事件名称 | 说明 | 返回值 |
|
|
| --- | --- | --- |
|
|
| @click | 点击 NoticeBar 触发事件 | - |
|
|
| @close | 关闭 NoticeBar 触发事件 | - |
|
|
| @getmore | 点击”查看更多“时触发事件 | - |
|
|
|
|
#### Platform Compatibility
|
|
|
|
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-notice-bar.html`
|
|
|
|
### Examples
|
|
|
|
### Example (Example 1)
|
|
|
|
```vue
|
|
<uni-notice-bar single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
|
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
|
```
|
|
|
|
### Example (Example 2)
|
|
|
|
```html
|
|
<uni-notice-bar single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
|
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
|
```
|
|
|
|
### Example (Example 3)
|
|
|
|
```vue
|
|
<uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
|
```
|
|
|
|
### Example (Example 4)
|
|
|
|
```html
|
|
<uni-notice-bar scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
|
```
|
|
|
|
### Example (Example 5)
|
|
|
|
```vue
|
|
<uni-notice-bar showIcon text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
|
```
|
|
|
|
### Example (Example 6)
|
|
|
|
```html
|
|
<uni-notice-bar showIcon text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
|
|
```
|
|
|
|
Reference:
|
|
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-notice-bar.html)
|
|
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=notice-bar)
|
|
- [Local Example](examples/uni-ui/uni-notice-bar.vue)
|