tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
278
1.2m

通知栏 xNotice ​

预览

介绍 ​

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

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

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

使用 ​

ts

<x-notice></x-notice>

Props 属性 ​

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

Events 事件 ​

名称参数说明
clickindex: number项目被点击

Slots 插槽 ​

名称说明数据

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/notice

示例源码 ​

uvue
vue
<template>
	<!-- #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>

</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>

</style>
最近更新