该组件用于滚动通告场景，有多种模式可供选择

基本使用

• 通过text参数设置需要滚动的内容

<template>
	<view>
      <un-notice-bar :text="text1"></un-notice-bar>
    </view>
</template>

<script setup lang="ts">
	const text1 = ['uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用']
</script>

可关闭

通过mode配置为closable让右侧显示关闭按钮

<template>
  <view>
    <un-notice-bar :text="text1" mode="closable"></un-notice-bar>
  </view>
</template>

<script setup lang="ts">
  const text1 = ['uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用']
</script>

配置滚动速度和跳转

• speed可配置横向滚动速度
• url可配置跳转

<template>
  <view>
    <un-notice-bar :text="text1" mode="closable" :speed="250" url="/pages/componentsB/tag/tag"></un-notice-bar>
  </view>
</template>

<script setup lang="ts">
  const text1 = ['uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用']
</script>

API

Props

参数	说明	类型	默认值
text	显示的内容，数组	string[]	-
direction	通告滚动模式，row-横向滚动，column-竖向滚动	Enum	row
step	direction = row时，是否使用步进形式滚动	Boolean	false
icon	左侧图标名称	string	volume
mode	通告模式，link-显示右箭头，closable-显示右侧关闭图标	Enum	-
color	文字颜色，各图标也会使用文字颜色	string	#f9ae3d
bgColor	背景颜色	string	#fdf6ec
round	圆角值	string | number	-
speed	水平滚动时的滚动速度	string | number	50
fontSize	字体大小	string | number	14
disableTouch	是否禁用触摸事件	Boolean	false
duration	滚动一个周期的时间长，单位ms	string | number	2000
url	跳转的页面路径	string	-
linkType	页面跳转的类型	Enum	navigateTo

Events

事件名	说明	回调参数
click	点击通告文字触发	Function
close	点击右侧关闭图标触发	Function

Scss 变量

变量名	默认值	说明
$un-notice-bar-padding	10px	通知栏内边距
$un-notice-bar-icon-margin-right	5px	左侧图标右边距
$un-notice-swiper-column-width	10000px	竖向滚动swiper宽度
$un-notice-swiper-text-padding-left	100%	竖向滚动文字左边距
$un-notice-animation-duration	10s	动画持续时间

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档