uniapp实现不同样式的通告栏

前言

uni-notice-bar组件是uni-app框架提供的一个通知栏组件。通知栏组件可以在界面的顶部或底部展示一条滚动的通知消息。它可以用于展示一些重要的信息或通知，让用户可以快速地获取到这些信息。

---

提示：以下是本篇文章正文内容，下面案例可供参考

uni-notice-bar组件具有以下特点：：

1、可自定义样式：可以通过设置组件的属性来自定义通知栏的样式，包括背景色、文字颜色、图标等。
2、支持滚动效果：当通知内容超出组件的宽度时，组件会自动启用滚动效果，让用户可以看到完整的通知内容。
3、支持点击事件：可以为通知栏组件绑定点击事件，当用户点击通知栏时，可以触发相应的操作或界面跳转。
4、支持自定义图标：可以通过设置组件的属性来自定义通知栏的图标，可以使用内置的图标库，也可以使用自定义的图标。
5、支持多种展示方式：通知栏组件支持顶部展示和底部展示两种模式，可以根据实际需求选择合适的展示方式。

如下图所示，本篇文章展示了非常多的用法和示例代码

<template>
	<view class="container">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。</text>
		</uni-card>

		<uni-section title="多行显示" type="line">
			<uni-notice-bar text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</uni-section>
		<uni-section title="单行显示" subTitle="使用 single 属性单行显示通知" type="line">
			<uni-notice-bar single text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</uni-section>
		<uni-section title="显示图标" subTitle="使用 show-icon 属性显示左侧小喇叭图标" type="line">
			<uni-notice-bar show-icon text="uni-app发布，开发一次、7端覆盖！" />
		</uni-section>
		<uni-section title="文字滚动" subTitle="使用 scrollable 属性使通告滚动,此时 single 属性将失效,始终单行显示" type="line">
			<uni-notice-bar show-icon scrollable
				text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</uni-section>
		<uni-section title="查看更多" subTitle="使用 show-get-more 显示更多,此时 single 属性将失效,始终单行显示,如不配置 more-text 属性 ,将显示箭头图标"
			type="line">
			<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 新增百度、支付宝小程序。插件市场重磅上线！"
				@getmore="getMore" />
		</uni-section>
		<uni-section title="修改颜色" type="line">
			<uni-notice-bar single color="#2979FF" background-color="#EAF2FF"
				text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
		</uni-section>
		<uni-section title="关闭按钮" subTitle="使用 show-close 属性,可关闭通知" type="line">
			<uni-notice-bar show-close single text="HBuilderX 1.0正式发布！uni-app实现里程碑突破实现里程碑突破！" />
		</uni-section>
	</view>
</template>

<script>
	export default {
		methods: {
			getMore() {
				uni.showToast({
					title: '点击查看更多',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		/* #ifndef APP-NVUE */
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		/* #endif */
	}
</style>

API

使用uni-notice-bar组件可以提高用户对重要通知的关注度，并且通过滚动效果可以引起用户的注意。可以在uni-app官方文档中查看该组件的详细使用方法和属性说明。