uview-plus

# 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 显示的内容，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 -
justifyContent 文字水平布局类型 String flex-start flex-end/center

# Events

详细解释见上方说明

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

← Notify 消息提示 →