返回介绍

开发指南

组件

JS

模板

NoticeBar 滚动通知

发布于 2021-04-03 05:35:24 字数 6915 浏览 968 评论 0 收藏 0

NoticeBar 滚动通知 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

  • 通过list数组参数设置需要滚动的内容
  • 滚动mode参数有两种模式,分别是horizontal水平滚动,vertical垂直滚动。其中水平滚动又可以通过is-circular来配置是衔接滚动(true)还是步进滚动(false), 衔接滚动滚动会把list数组元素拼接成一个字符串形式进行滚动,步进滚动模式类似轮播图水平滚动的形式,具体效果请见实例
<template>
	<view>
		<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
		
		<u-notice-bar mode="horizontal" :is-circular="false" :list="list"></u-notice-bar>
		
		<u-notice-bar mode="vertical" :list="list"></u-notice-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				]
			}
		}
	}
</script>

配置主题

  • 通过type参数可以配置5种主题,即primarywarning(默认)、errorinfosuccessnone

说明:none主题默认没有背景颜色

<u-notice-bar type="error" :list="list"></u-notice-bar>

配置图标

  • volume-icon参数配置是否显示左侧的音量小喇叭图标,默认显示
  • more-icon配置是否显示右侧的向右箭头,默认关闭
  • close-icon配置是否显示关闭的图标,默认关闭
<u-notice-bar :volume-icon="false" :list="list"></u-notice-bar>

<u-notice-bar :more-icon="true" :list="list"></u-notice-bar>

<u-notice-bar :close-icon="true" :list="list"></u-notice-bar>

配置滚动速度

  • modevertical(垂直滚动),或者modehorizontalis-circularfalse时,两者都可视为"步进"滚动,此时通过duration设置滚动周期时长
  • modehorizontalis-circulartrue时,可视为"水平衔接滚动",此时uView加入了一个滚动因子参数,可确保在任意多内容情况下,滚动速度恒定不变, 可通过speed参数配置每秒滚动的距离,单位为rpx
<u-notice-bar :mode="vertical" :duration="1500" :list="list"></u-notice-bar>

<u-notice-bar :mode="vertical" :is-circular="false" :duration="1500" :list="list"></u-notice-bar>

<u-notice-bar :mode="vertical" :is-circular="true" :speed="200"  :list="list"></u-notice-bar>

控制滚动的开始和暂停

  • autoplay参数默认为true,控制是否自动播放滚动通告
  • play-state参数为paused,滚动会暂停,为play滚动继续播放
<u-notice-bar :autoplay="true" play-state="paused" :list="list"></u-notice-bar>

事件回调

  • more-icon参数为true时,点击向右图标会回调一个getMore事件
  • close-icon参数为true时,点击关闭箭头图标会触发一个close事件
  • 点击通告栏的文字时,会触发click事件,回调参数为当前文字所在list数组参数的索引值

API

Props

参数说明类型默认值可选值
list滚动内容,数组形式,见上方说明Array--
type显示的主题Stringwarningprimary / info / error / success / none
volume-icon是否显示小喇叭图标Booleantruefalse
more-icon是否显示右边的向右箭头Booleanfalsetrue
close-icon是否显示关闭图标Booleanfalsetrue
autoplay是否自动播放Booleantruefalse
color文字颜色String--
bg-color背景颜色String | Number--
mode滚动模式Stringhorizontal(水平滚动)vertical(垂直滚动)
show是否显示Booleantruefalse
volume-size左边喇叭的大小String | Number34-
font-size字体大小,单位rpxString | Number28-
duration滚动周期时长,只对步进模式有效,横向衔接模式无效,单位msString | Number2000-
speed水平滚动时的滚动速度,即每秒移动多少距离,只对水平衔接方式有效,单位rpxString | Number160-
is-circularmodehorizontal时,指明是否水平衔接滚动Booleantruefalse
play-state播放状态,play - 播放,paused - 暂停Stringplaypaused
disable-touch是否禁止通过手动滑动切换通知,只有mode = vertical,或者mode = horizontal且is-circular = false时有效;只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序Booleantruefalse
padding内置滚动通知的内边距,字符串,类似"16rpx 20rpx"String18rpx 24rpx-
border-radius圆角值,单位rpxString \ Number0-
no-list-hiddenlist为空数组时,是否显示组件Booleantruefalse

Events

详细解释见上方说明

事件名说明回调参数版本
click点击通告文字触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效index:当前文字所在list数组的索引值-
close点击右侧关闭图标触发--
getMore点击右侧向右图标触发--
end列表的消息每次被播放一个周期时触发,只有mode = vertical,或者mode = horizontal且is-circular = false时有效--

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文