You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
5 years ago | |
|---|---|---|
| .. | ||
| components/uni-notice-bar | 5 years ago | |
| changelog.md | 5 years ago | |
| package.json | 5 years ago | |
| readme.md | 5 years ago | |
readme.md
NoticeBar 通告栏
代码块:
uNoticeBar
通告栏组件 。
安装方式
本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components。
如需通过npm方式使用uni-ui组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55
基本用法
在 template 中使用组件
<!-- 基本用法 -->
<uni-notice-bar single="true" text="[单行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
<uni-notice-bar text="[多行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 文字滚动 -->
<uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 显示图标 -->
<uni-notice-bar showIcon="true" text="[多行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 显示关闭按钮 -->
<uni-notice-bar showClose="true" showIcon="true" text="这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
<!-- 查看更多 -->
<uni-notice-bar @getmore="getMore" :showGetMore="true" moreText="查看更多" single="true" text="[单行] 这是 NoticeBar 通告栏,这是 NoticeBar 通告栏,这是 NoticeBar 通告栏"></uni-notice-bar>
如果需要异步获取内容后展示需要使用
v-if进行控制,<uni-notice-bar v-if="text" :text="text"></uni-notice-bar>
NoticeBar API
NoticeBar Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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为单行 |
NoticeBar Events
| 事件名称 | 说明 | 返回值 |
|---|---|---|
| @click | 点击 NoticeBar 触发事件 | - |
| @close | 关闭 NoticeBar 触发事件 | - |
| @getmore | 点击”查看更多“时触发事件 | - |