NoticeBar 通告栏

概述

NoticeBar 通告栏，一般用作系统提醒、活动提醒等通知。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiNoticeBar from "@/components/firstui/fui-notice-bar/fui-notice-bar.vue"
export default {
	components:{
		fuiNoticeBar
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

单行展示

通过 padding 属性设置通告栏左右padding值，content 属性设置通告栏内容，single 属性设置通告栏是否单行显示（超出内容隐藏）。

<fui-notice-bar :padding="['0','32rpx']" :content="content" single></fui-notice-bar>

data() {
	return {
		content: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
	}
}

文字滚动

通过 content 属性设置通告栏内容，scrollable 属性设置通告栏是否滚动显示。

<fui-notice-bar :content="content" scrollable></fui-notice-bar>

data() {
	return {
		content: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
	}
}

加图标/控制速度

通过 content 属性设置通告栏内容，speed 属性控制文字滚动速度，scrollable 属性设置通告栏是否滚动显示。

<fui-notice-bar :content="content" :speed="200" scrollable>
	<view class="fui-icon__box">
		<fui-icon name="notice" :size="36" color="#FF2B2B"></fui-icon>
	</view>
</fui-notice-bar>

.fui-icon__box {
	padding-left: 24rpx;
	padding-right: 12rpx;
}

data() {
	return {
		content: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
	}
}

Slots

插槽名称	说明
default	通告栏内容左侧自定义内容
right	通告栏内容右侧自定义内容

Props

属性名	类型	说明	默认值	平台差异说明
height	Number, String	通告栏高度，单位rpx	72	-
content	String	通告栏内容	-	-
size	Number, String	通告栏字体大小，单位rpx	28	-
color	String	通告栏字体颜色	#FF2B2B	非Nvue端默认为空，可通过css变量（--fui-color-danger）来改变颜色值
bold	Boolean	通告栏字体是否加粗	false	-
background	String	通告栏背景色	rgba(255, 43, 43, .05)	-
padding	Array	通告栏padding值，['20rpx','30rpx','20rpx','30rpx']=>[上，右，下，左]	[ ]	-
single	Boolean	通告栏是否单行显示	false	-
scrollable	Boolean	通告栏是否滚动显示，设置为true时single效果失效	false	-
speed	Number, String	通告栏每秒滚动速度（距离），默认 100px/s	100	-
activeMode	String	通告栏滚动方式，可选值：backwards（动画从头开始播）、forwards（动画从结束点开始播）	backwards	-
param	Number, String	自定义参数，事件回调中回传	0	-

Events

事件名	说明	回调参数
@click	点击通告栏内容时触发	{   param:this.param }
@leftClick	点击通告栏左侧自定义内容时触发	{   param:this.param }
@rightClick	点击通告栏右侧自定义内容时触发	{   param:this.param }

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)