wk-view

Appearance

On this page

wkv-marqueue ​

走马灯，可用于展示公告或通知消息

用法 ​

html
<wkv-marqueue contents="走马灯要展示的内容"></wkv-marqueue>

Props ​

属性名类型默认值说明
horizontalBooleantrue是否为横向滚动，如果为 false 则需要 contents 为数组，并且为上下轮播
contents[String, Array]''滚动的内容
speedNumber2滚动内容的速率单位为 px
durationNumber3000多久后展示下一条滚动数据，单位 ms
showButtonBooleantrue是否显示更多按钮
buttonTextString更多按钮展示的文本

Events ​

事件名事件说明函数签名参数说明
moreClick按钮的点击事件() => void-

示例 ​

vue
<template>
	<view class="wkv-marqueue-example">
		<wk-section>horizontal</wk-section>
		<wkv-marqueue
			contents="走马灯,我是一个走马灯啊!!!!!!是一个一直在动的走马灯!!!~~~~"
		></wkv-marqueue>
		
		<wk-section>vertical</wk-section>
		<wkv-marqueue
			:horizontal="false"
			:contents="['公告1：测试公告1', '公告2：测试公告2']"
		></wkv-marqueue>
	</view>
</template>
vue
<script setup></script>
scss
<style lang="scss">
.wkv-marqueue-example {
	padding: 20px;
}
</style>