# NoticeBar 滚动通知

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

# 平台差异说明

App(vue) App(nvue) H5 小程序

# 基本使用

  • 通过text参数设置需要滚动的内容
<template>
	<view>
      <up-notice-bar :text="text1"></up-notice-bar>
    </view>
</template>
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const text1 = ref('uview-plus UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用');  
</script>
<script>
	export default {
		data() {
			return {
              text1: 'uview-plus UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用'
			}
		}
	}
</script>

# 可关闭

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

<template>
  <view>
    <up-notice-bar :text="text1" mode="closable"></up-notice-bar>
  </view>
</template>
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const text1 = ref('uview-plus UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用');  
</script>
<script>
	export default {
		data() {
			return {
              text1: 'uview-plus UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用'
			}
		}
	}
</script>

# 配置滚动速度和跳转

  • speed可配置横向滚动速度
  • url可配置跳转
<template>
  <view>
    <up-notice-bar :text="text1" mode="closable" speed="250" url="/pages/componentsB/tag/tag"></up-notice-bar>
  </view>
</template>
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const text1 = ref('uview-plus UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用');  
</script>
<script>
	export default {
		data() {
			return {
              text1: 'uview-plus UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用'
			}
		}
	}
</script>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
text 显示的内容,directioncolumn时要求为数组, 为row时要求为字符串 Array | String - -
direction 通告滚动模式,row-横向滚动,column-竖向滚动 String row column
step direction = row时,是否使用步进形式滚动 Boolean false true
icon 是否显示左侧的音量图标 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 -
disableTouch 是否禁止用手滑动切换(目前HX2.6.11,只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序) Boolean true false
url 跳转的页面路径 String - -
linkType 页面跳转的类型 String navigateTo -

# Events

详细解释见上方说明

事件名 说明 回调参数 版本
click 点击通告文字触发 index: 点击的text的索引 -
close 点击右侧关闭图标触发 - -