官方示例：https://ext.dcloud.net.cn/plugin?id=30
通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。
基本用法：
<template>
<view>
<uni-notice-bar :single="true" text="[单行] uni-app 1.6发布，开发一次、7端覆盖！" />
<uni-notice-bar text="[多行] uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
</view>
</template>加图标：
<template>
<view>
<uni-notice-bar :single="true" :show-icon="true" text="uni-app行业峰会频频亮相，开发者反响热烈!" />
<uni-notice-bar :show-icon="true" text="8月12日DCloud受邀参加iWEB峰会后，9月19日DCloud CEO 王安在千人小程序峰会——见实大会，做了主题为《App和小程序，鱼与熊掌如何兼得？》的分享。" />
</view>
</template>滚动：
<template>
<view>
<uni-notice-bar :scrollable="true" :single="true" text="uni-app行业峰会频频亮相，开发者反响热烈!" />
<uni-notice-bar
:show-icon="true"
:scrollable="true"
:single="true"
text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
<uni-notice-bar
:scrollable="true"
text="8月12日DCloud受邀参加iWEB峰会后，9月19日DCloud CEO 王安在千人小程序峰会——见实大会，做了主题为《App和小程序，鱼与熊掌如何兼得？》的分享。"
/>
</view>
</template>查看更多：
<template>
<view>
<uni-notice-bar :show-get-more="true" :single="true" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！" @getmore="getMore" />
<uni-notice-bar
:show-get-more="true"
:show-icon="true"
:single="true"
more-text="查看更多"
text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
@getmore="getMore"
/>
</view>
</template>
<script>
export default {
components: {},
data() {
return {};
},
created() {},
methods: {
getMore() {
uni.showToast({
title: '点击查看更多',
icon: 'none'
});
}
}
};
</script>修改颜色：
<template>
<view>
<uni-notice-bar
:single="true"
more-text="查看更多"
color="red"
background-color="#eee"
text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
<uni-notice-bar
:single="true"
:show-get-more="true"
more-text="查看更多"
more-color="blue"
color="red"
background-color="#eee"
text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
@getmore="getMore"
/>
<uni-notice-bar
:show-icon="true"
color="blue"
text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
</view>
</template>
<script>
export default {
components: {},
data() {
return {};
},
created() {},
methods: {
getMore() {
uni.showToast({
title: '点击查看更多',
icon: 'none'
});
}
}
};
</script>关闭按钮：
<template>
<view>
<uni-notice-bar :show-close="true" :single="true" text="HBuilderX 1.0正式发布！uni-app实现里程碑突破！" />
<uni-notice-bar :show-close="true" :show-icon="true" more-text="查看更多" text="HBuilderX 1.0正式发布！uni-app实现里程碑突破！" />
<uni-notice-bar :show-close="true" :show-icon="true" text="uni-app 1.6发布，开发一次、7端覆盖！" />
<uni-notice-bar
:show-close="true"
:show-icon="true"
:single="true"
text="uni-app 1.6版正式发布，开发一次，同时发布到iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
/>
</view>
</template>