NoticeBar 滚动通知

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

平台差异说明

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

基本使用

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

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

<script>
	export default {
		data() {
			return {
          text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
			}
		}
	}
</script>

可关闭

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

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

<script>
  export default {
    data() {
      return {
        text1: 'uView 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>
  export default {
    data() {
      return {
        text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
      }
    }
  }
</script>

此页面源代码地址

页面源码地址

 github  gitee

API

Props

参数	说明	类型	默认值	可选值
text	显示的内容，direction为column时要求为数组， 为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	点击右侧关闭图标触发	-	-