滚动公告

组件介绍

ux-speaker 滚动公告组件，以 swiper 组件为基础，可以用于展示多条公告的动画切换。

运行图示

组件属性

属性名称	类型	默认值	作用
items	Array	UXSpeakerItem[]	公告项目数据，格式 : { title: "标题", path: "跳转页面路径", openType: "页面打开方式"} 跳转功能使用 navigator 实现，手册 : https://uniapp.dcloud.net.cn/uni-app-x/component/navigator.html
current	Number	0	默认展示的选项
interval	Number	5000	切换间隔时间
itemClass	Array	string['ux-text', 'ux-primary-text']	核心区域样式
height	Number	66	组件高度，单位 rpx

演示代码

<template>
	<view class="ux-body">
		<text class="ux-h6 ux-color-grey ux-mt-large">滚动公告</text>
		<view class="ux-demo" 
		style="padding:10rpx 20rpx;">
			<ux-speaker 
			:items="speakerItems" 
			@change="chang1">
				<template v-slot:icon>
					<text 
					class="ux-icons demo-icon ux-primary-color">{{"\ue656"}}</text>
				</template>  
			</ux-speaker>
		</view>
	</view>
</template>
<script lang="uts">
import {UXSpeakerItem} from "@/uni_modules/unix-ui/uxts/classes.uts";
export default {
	data() {
		return {
			speakerItems : [
				{ 
					title: "uXui 一款基于 uni-app x 的、免费、开源的 UI 框架", 
					path:"/pages/switchPages/index", 
					openType: "switchTab",
				},
				{ 
					title: "lesscode.work - 精品 IT 课程中心", 
					path:"/pages/switchPages/index", 
					openType: 
					"switchTab"
				}
			] as UXSpeakerItem[]
		}
	},
	methods: {
		chang1:function(idx:number){
			console.log(idx);
		},
		chang2:function(idx:number){
			console.log(idx);
		}
	}
}
</script>
<style scoped>
.demo-icon{width:50rpx; line-height:60rpx; font-size:32rpx;}
</style>