NoticeBar 滚动通知

NoticeBar 滚动通知 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	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种主题，即primary、warning(默认)、error、info、success、none

说明：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>

配置滚动速度

• mode为vertical(垂直滚动)，或者mode为horizontal且is-circular为false时，两者都可视为"步进"滚动，此时通过duration设置滚动周期时长
• mode为horizontal且is-circular为true时，可视为"水平衔接滚动"，此时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

Events

详细解释见上方说明