Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
7f83ffbb
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3341
Star
107
Fork
853
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
103
列表
看板
标记
里程碑
合并请求
85
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
103
Issue
103
列表
看板
标记
里程碑
合并请求
85
合并请求
85
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
7f83ffbb
编写于
8月 05, 2024
作者:
Dcloud_UNI_yuhe
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update uni-notice-bar.md
上级
5405a05a
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
60 addition
and
61 deletion
+60
-61
docs/component/uniui/uni-notice-bar.md
docs/component/uniui/uni-notice-bar.md
+60
-61
未找到文件。
docs/component/uniui/uni-notice-bar.md
浏览文件 @
7f83ffbb
::: tip 组件名:uni-notice-bar
::: tip 组件名:uni-notice-bar
> 代码块: `uNoticeBar`
> 代码块: `uNoticeBar`
...
@@ -58,7 +57,7 @@
...
@@ -58,7 +57,7 @@
|single|Boolean|false|是否单行|
|single|Boolean|false|是否单行|
|scrollable|Boolean|false|是否滚动,为true时,NoticeBar为单行|
|scrollable|Boolean|false|是否滚动,为true时,NoticeBar为单行|
|showIcon|Boolean|false |是否显示左侧喇叭图标|
|showIcon|Boolean|false |是否显示左侧喇叭图标|
|showClose|Boolean|false|是否显示
左
侧关闭按钮|
|showClose|Boolean|false|是否显示
右
侧关闭按钮|
|showGetMore|Boolean|false|是否显示右侧查看更多图标,为true时,NoticeBar为单行|
|showGetMore|Boolean|false|是否显示右侧查看更多图标,为true时,NoticeBar为单行|
### NoticeBar Events
### NoticeBar Events
...
@@ -81,71 +80,71 @@
...
@@ -81,71 +80,71 @@
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar
> Template
> Template
```
html
```
html
<template>
<template>
<view
class=
"container"
>
<view
class=
"container"
>
<uni-card
is-full
:is-shadow=
"false"
>
<uni-card
is-full
:is-shadow=
"false"
>
<text
class=
"uni-h6"
>
通告栏组件多用于系统通知,广告通知等场景,可自定义图标,颜色,展现方式等。
</text>
<text
class=
"uni-h6"
>
通告栏组件多用于系统通知,广告通知等场景,可自定义图标,颜色,展现方式等。
</text>
</uni-card>
</uni-card>
<uni-section
title=
"多行显示"
type=
"line"
>
<uni-section
title=
"多行显示"
type=
"line"
>
<uni-notice-bar
text=
"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
<uni-notice-bar
text=
"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
</uni-section>
</uni-section>
<uni-section
title=
"单行显示"
subTitle=
"使用 single 属性单行显示通知"
type=
"line"
>
<uni-section
title=
"单行显示"
subTitle=
"使用 single 属性单行显示通知"
type=
"line"
>
<uni-notice-bar
single
text=
"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
<uni-notice-bar
single
text=
"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
</uni-section>
</uni-section>
<uni-section
title=
"显示图标"
subTitle=
"使用 show-icon 属性显示左侧小喇叭图标"
type=
"line"
>
<uni-section
title=
"显示图标"
subTitle=
"使用 show-icon 属性显示左侧小喇叭图标"
type=
"line"
>
<uni-notice-bar
show-icon
text=
"uni-app发布,开发一次、7端覆盖!"
/>
<uni-notice-bar
show-icon
text=
"uni-app发布,开发一次、7端覆盖!"
/>
</uni-section>
</uni-section>
<uni-section
title=
"文字滚动"
subTitle=
"使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示"
type=
"line"
>
<uni-section
title=
"文字滚动"
subTitle=
"使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示"
type=
"line"
>
<uni-notice-bar
show-icon
scrollable
<uni-notice-bar
show-icon
scrollable
text=
"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
text=
"uni-app 版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
</uni-section>
</uni-section>
<uni-section
title=
"查看更多"
subTitle=
"使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标"
<uni-section
title=
"查看更多"
subTitle=
"使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标"
type=
"line"
>
type=
"line"
>
<uni-notice-bar
show-get-more
show-icon
text=
"年末大礼:uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线!"
@
getmore=
"getMore"
/>
<uni-notice-bar
show-get-more
show-icon
text=
"年末大礼:uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线!"
@
getmore=
"getMore"
/>
<uni-notice-bar
show-get-more
show-icon
more-text=
"查看更多"
text=
"年末大礼:uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线!"
<uni-notice-bar
show-get-more
show-icon
more-text=
"查看更多"
text=
"年末大礼:uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线!"
@
getmore=
"getMore"
/>
@
getmore=
"getMore"
/>
</uni-section>
</uni-section>
<uni-section
title=
"修改颜色"
type=
"line"
>
<uni-section
title=
"修改颜色"
type=
"line"
>
<uni-notice-bar
single
color=
"#2979FF"
background-color=
"#EAF2FF"
<uni-notice-bar
single
color=
"#2979FF"
background-color=
"#EAF2FF"
text=
"uni-app 1.6版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
text=
"uni-app 1.6版正式发布,开发一次,同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
</uni-section>
</uni-section>
<uni-section
title=
"关闭按钮"
subTitle=
"使用 show-close 属性,可关闭通知"
type=
"line"
>
<uni-section
title=
"关闭按钮"
subTitle=
"使用 show-close 属性,可关闭通知"
type=
"line"
>
<uni-notice-bar
show-close
single
text=
"HBuilderX 1.0正式发布!uni-app实现里程碑突破实现里程碑突破!"
/>
<uni-notice-bar
show-close
single
text=
"HBuilderX 1.0正式发布!uni-app实现里程碑突破实现里程碑突破!"
/>
</uni-section>
</uni-section>
</view>
</view>
</template>
</template>
```
```
> Script
> Script
```
html
```
html
<script>
<script>
export
default
{
export
default
{
methods
:
{
methods
:
{
getMore
()
{
getMore
()
{
uni
.
showToast
({
uni
.
showToast
({
title
:
'
点击查看更多
'
,
title
:
'
点击查看更多
'
,
icon
:
'
none
'
icon
:
'
none
'
})
})
}
}
}
}
}
}
</script>
</script>
```
```
> Style
> Style
```
html
```
html
<style
lang=
"scss"
>
<style
lang=
"scss"
>
.container
{
.container
{
/* #ifndef APP-NVUE */
/* #ifndef APP-NVUE */
position
:
absolute
;
position
:
absolute
;
left
:
0
;
left
:
0
;
right
:
0
;
right
:
0
;
top
:
0
;
top
:
0
;
bottom
:
0
;
bottom
:
0
;
/* #endif */
/* #endif */
}
}
</style>
</style>
```
```
:::
:::
[
完整示例演示
](
https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar
)
[
完整示例演示
](
https://hellouniapp.dcloud.net.cn/pages/extUI/notice-bar/notice-bar
)
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录