uv-ui

# NoticeBar 滚动通知

✈

组件名：uv-notice-bar

点击下载&安装 (opens new window)

该组件一般用于滚动公告等场景，灵活配置，有多种模式可供选择。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

通过text属性设置需要滚动的内容

<template>
	<view>
		<uv-notice-bar :text="text"></uv-notice-bar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text: 'uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
			}
		}
	}
</script>

# 竖向滚动

通过 direction 配置为 column 可以竖向滚动，默认为 row

<template>
	<view>
		<uv-notice-bar :text="text" direction="column"></uv-notice-bar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text: ['uv-ui众多组件覆盖开发过程的各个需求','组件功能丰富，多端兼容','让您快速集成，开箱即用']
			}
		}
	}
</script>

# 可关闭

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

<template>
	<view>
		<uv-notice-bar :text="text" mode="closable"></uv-notice-bar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text: 'uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
			}
		}
	}
</script>

# 配置滚动速度和跳转

  • speed可配置横向滚动速度
  • url可配置跳转
<template>
	<view>
		<uv-notice-bar :text="text" mode="closable" speed="250" url="/pages/componentsB/tag/tag"></uv-notice-bar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				text: 'uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# NoticeBar Props

参数 说明 类型 默认值 可选值 平台差异性说明
text 显示的内容，direction为column时要求为数组， 为row时要求为字符串 Array | String - -
direction 通告滚动模式，row-横向滚动，column-竖向滚动 String row row | column -
step direction = "row"时，是否使用步进形式滚动 Boolean false true | false -
icon 左侧的音量图标，不显示:icon="false"或传空 String volume -
mode 通告模式，link-显示右箭头，closable-显示右侧关闭图标 String - link | closable -
color 文字颜色 String #f9ae3d - -
bgColor 背景颜色 String #fdf6ec - -
speed 水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度 String | Number 80 - -
fontSize 字体大小 String | Number 14 -
duration 滚动一个周期的时间长，单位ms String | Number 2000 - -
url 跳转的页面路径 String - - -
linkType 页面跳转的类型 String navigateTo - -
disableTouch 是否禁止用手滑动切换，仅direction="column"生效 Boolean true true | false App 2.5.5+、H5 2.5.5+、支付宝小程序、抖音小程序与飞书小程序（只在初始化时有效，不能动态变更）
disableScroll 1.0.4 是否禁止自动滚动，仅direction="column"生效 Boolean false true | false -
customStyle 定义需要用到的外部样式 Object - - -

# NoticeBar Events

事件名 说明 回调参数
@click 点击通告文字触发 index: 点击的text的索引
@close 点击右侧关闭图标触发 -
@change direction 为 column 滚动时触发 index: 索引

← Notify 消息提示 →