uview-ultra v4

Appearance

NoticeBar 滚动通知 ​

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

平台差异说明 ​

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

基本使用 ​

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

可关闭 ​

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

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

配置滚动速度和跳转 ​

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

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

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


 github  gitee

API ​

Props ​

参数说明类型默认值可选值
text显示的内容，direction为column时要求为数组， 为row时要求为字符串Array | String--
direction通告滚动模式，row-横向滚动，column-竖向滚动Stringrowcolumn
stepdirection = row时，是否使用步进形式滚动Booleanfalsetrue
icon是否显示左侧的音量图标Stringvolume-
mode通告模式，link-显示右箭头，closable-显示右侧关闭图标String-link / closable
color文字颜色String#f9ae3d-
bgColor背景颜色String#fdf6ec-
speed水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度String | Number80-
fontSize字体大小String | Number14-
duration滚动一个周期的时间长，单位msString | Number2000-
disableTouch是否禁止用手滑动切换（目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序）Booleantruefalse
url跳转的页面路径String--
linkType页面跳转的类型StringnavigateTo-
justifyContent文字水平布局类型Stringflex-startflex-end/center

Events ​

详细解释见上方说明

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