uniapp中uview组件库的NoticeBar 滚动通知 使用方法

目录

#平台差异说明

#基本使用

#配置主题

#配置图标

#配置滚动速度

#控制滚动的开始和暂停

#事件回调

#API

#Props

#Events

---

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

#平台差异说明

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参数