提交 7f83ffbb 编写于 作者: Dcloud_UNI_yuhe's avatar Dcloud_UNI_yuhe

Update uni-notice-bar.md

上级 5405a05a
::: 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.
先完成此消息的编辑!
想要评论请 注册