通知栏 xNotice

---

在线预览

在线模拟尺寸:

介绍

速度可控，样式比较方便的调整。如果想要竖向的，请使用官方的轮播实现。

平台兼容

H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑️	☑️	☑️	☑️	4.44+	1.1.9

文件路径

@/uni_modules/tmx-ui/components/x-notice/x-notice.uvue

使用

<x-notice></x-notice>

Props 属性

名称	说明	类型	默认值
speed	速率	number	30
color	背景色	string	"#ebf4ff"
darkColor	暗黑时的背景色，如果不填写，取color暗黑浅背景。	string	""
fontColor	文字和图标色	string	"primary"
fontSize	文字大小和图标大小	string	"14"
icon	图标，如果为空将不显示 。	string	"megaphone-line"
iconColor	不填写的话取fontColor	string	""
iconSize	不填写的话取fontSize	string	""
label	通知文本。	string[]	() : string[] => []

Events 事件

名称	参数	说明
click	**index** : number	项目被点击

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/zhanshi/notice

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->

	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">通知栏 Notice</x-text>
			<x-text color="#999999" >
				速度可控，样式比较方便的调整。如果想要竖向的，请使用官方的轮播实现。
			</x-text>
		</x-sheet>
		<x-sheet>
			<x-notice
			class="mb-24"
			:label="['比马斯克脑机接口更精确微创，超声波读脑大法来了','后期狂喜，一张照片丝滑替换视频主角，动作幅度再大也OK']"
			></x-notice>
			
			<x-notice
			class="mb-24"
			color="error"
			dark-color="error"
			font-color="white"
			:label="['出门问问急切赴港IPO：与大众汽车“分道扬镳”，现金已不足2亿','后期狂喜，一张照片丝滑替换视频主角，动作幅度再大也OK']"
			></x-notice>
			
			<x-notice
			icon="router-fill"
			color="warn"
			dark-color="warn"
			font-color="white"
			:label="['现金流不足1.6亿元的出门问问，该如何在这场“烧钱”游戏中突围？','后期狂喜，一张照片丝滑替换视频主角，动作幅度再大也OK']"
			></x-notice>
			
		</x-sheet>
		
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-12">控制速度</x-text>
			<x-notice
			:speed="10"
			:label="['比马斯克脑机接口更精确微创，超声波读脑大法来了','后期狂喜，一张照片丝滑替换视频主角，动作幅度再大也OK']"
			></x-notice>
		</x-sheet>
		<x-sheet >
			<x-text font-size="18" class=" text-weight-b mb-12">隐藏图标</x-text>
			<x-notice
			icon=""
			:speed="10"
			:label="['比马斯克脑机接口更精确微创，超声波读脑大法来了','后期狂喜，一张照片丝滑替换视频主角，动作幅度再大也OK']"
			></x-notice>
		</x-sheet>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script lang="uts">
	// import {xOverflay} from "../../uni_modules/x-core"
	export default {
		data() {
			return {
				label: [] as string[],
			};
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>

</style>