Uniapp component -uni notice bar notice bar

The bulletin board component is mostly used for system notification , Advertising notices and other scenes , Customizable icons , Color , Presentation mode, etc .

Basic usage

Use  text  Property to set the contents of the bulletin board

Use  singlet  Property to set whether the guide is displayed in a single line

<uni-notice-bar single text="[ A single ]  This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board "></uni-notice-bar>
<uni-notice-bar text="[ Multiple lines ]  This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board "></uni-notice-bar>

# Text scrolling

Use  scrollable  Property to set whether text scrolls

<uni-notice-bar scrollable single text="[ A single ]  This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board "></uni-notice-bar>

# Show icons

Use  showIcon  Property to set whether to display icons

<uni-notice-bar showIcon text="[ Multiple lines ]  This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board , This is a  NoticeBar  Bulletin board this is  NoticeBar  Notice board , This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board "></uni-notice-bar>

# Show close button

Use  showClose  Property to set whether to display the close icon

<uni-notice-bar showClose showIcon text=" This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board "></uni-notice-bar>

# To view more

Use  showGetMore  Property to set whether to display more icons on the right

Use  moreText  Property settings to see more text

 <uni-notice-bar @getmore="getMore" showGetMore moreText=" To view more " single text="[ A single ]  This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board , This is a  NoticeBar  Notice board "></uni-notice-bar>

Be careful

If you need to get content asynchronously, you need to use v-if Control ,<uni-notice-bar v-if="text" :text="text"></uni-notice-bar>

#NoticeBar API

#NoticeBar Props

Property name	type	The default value is	explain
speed	Number	100	The speed at which the text scrolls , Default 100px/ second
text	String	-	According to the text
background-color	String	#fffbe8	The background color
color	String	#de8c17	Text color
moreColor	String	#999999	See more text colors
moreText	String	-	Set up “ To view more ” The text of
single	Boolean	false	Whether it's a single line
scrollable	Boolean	false	Whether to scroll , by true when ,NoticeBar It is a single line
showIcon	Boolean	false	Whether the left horn icon is displayed
showClose	Boolean	false	Whether to display the left close button
showGetMore	Boolean	false	Whether to display the right view more icons , by true when ,NoticeBar It is a single line

#NoticeBar Events

Event name	explain	Return value
@click	Click on NoticeBar Triggering event	-
@close	close NoticeBar Triggering event	-
@getmore	Click on ” To view more “ Trigger event	-

# Example

Be careful

The example relies on  uni-card uni-section uni-scss  Wait for multiple components , Copying the sample code directly will not work .

succeed in inviting sb.   Component download page  (opens new window), Select... On the right side of the page   Use HBuilderX Import the sample project  , Experience the complete component example .

Template

Script

Style

<template>
	<view class="container">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6"> The bulletin board component is mostly used for system notification , Advertising notices and other scenes , Customizable icons , Color , Presentation mode, etc .</text>
		</uni-card>

		<uni-section title=" Multi line display " type="line">
			<uni-notice-bar text="uni-app  Version is officially released , Develop once , At the same time iOS、Android、H5、 Wechat applet 、 Alipay applet 、 Baidu applet 、 Headline applet, etc 7 Large platform ." />
		</uni-section>
		<uni-section title=" Single line display " subTitle=" Use  single  The attribute line shows the notification " type="line">
			<uni-notice-bar single text="uni-app  Version is officially released , Develop once , At the same time iOS、Android、H5、 Wechat applet 、 Alipay applet 、 Baidu applet 、 Headline applet, etc 7 Large platform ." />
		</uni-section>
		<uni-section title=" Show icons " subTitle=" Use  show-icon  Property displays the left trumpet icon " type="line">
			<uni-notice-bar show-icon text="uni-app Release , Develop once 、7 End coverage ！" />
		</uni-section>
		<uni-section title=" Text scrolling " subTitle=" Use  scrollable  Property scrolls the announcement , here  single  Property will fail , Always single line " type="line">
			<uni-notice-bar show-icon scrollable
				text="uni-app  Version is officially released , Develop once , At the same time iOS、Android、H5、 Wechat applet 、 Alipay applet 、 Baidu applet 、 Headline applet, etc 7 Large platform ." />
		</uni-section>
		<uni-section title=" To view more " subTitle=" Use  show-get-more  Show more , here  single  Property will fail , Always single line , If not configured  more-text  attribute  , Arrow icons will be displayed "
			type="line">
			<uni-notice-bar show-get-more show-icon text=" Year end gift ：uni-app1.4  New Baidu 、 Alipay applet . The plug-in market is heavily launched ！" @getmore="getMore" />
			<uni-notice-bar show-get-more show-icon more-text=" To view more " text=" Year end gift ：uni-app1.4  New Baidu 、 Alipay applet . The plug-in market is heavily launched ！"
				@getmore="getMore" />
		</uni-section>
		<uni-section title=" Change the color " type="line">
			<uni-notice-bar single color="#2979FF" background-color="#EAF2FF"
				text="uni-app 1.6 Version is officially released , Develop once , At the same time iOS、Android、H5、 Wechat applet 、 Alipay applet 、 Baidu applet 、 Headline applet, etc 7 Large platform ." />
		</uni-section>
		<uni-section title=" close button " subTitle=" Use  show-close  attribute , Notifications can be turned off " type="line">
			<uni-notice-bar show-close single text="HBuilderX 1.0 Official release ！uni-app Achieve milestone breakthrough achieve milestone breakthrough ！" />
		</uni-section>
	</view>
</template>