轮播

介绍

用于展示多张图片及内容等的循环播放，支持自动播放或用户手动切换。

API

Props

Props 属性

参数	说明	类型	默认值
默认状态	组件的状态, "默认"|"隐藏"	string	'default'
当前索引项	轮播图当前第几项	number	-
数据配置	轮播图循环渲染的数据	Array<Record<string, any>>	{title: string, background: string}[3]
自定义渲染函数	自定义每项轮播图的渲染内容，返回JSX	RenderFunc	""
自动循环	轮播图是否自动循环展示	boolean	false
自动切换时间间隔	自动循环开启后自动切的间隔时间	number	3000
鼠标悬浮时暂停自动切换	动循环开启后鼠标悬浮时是否暂停自动切换	boolean	true
切换动画	轮播图切换动画 "滑动"|"淡入淡出"|"卡片”	string	滑动
幻灯片切换触发方式	幻灯片切换触发方式, "点击"|"悬停"	string	点击
幻灯片移动方向	"横向"|"竖向"	string	横向
幻灯片移动速率	幻灯片切换的动画时间	number	500
切换箭头显示时机	"始终显示"|"悬停时"|"不显示"	string	始终显示
指示器类型	"线"|"点"|"滑块"|"无"	string	点
指示器位置	"上"|"下"|"左"|"右"|"外部"	string	下

Props 样式

参数	说明	类型	默认值
自定义样式	表格整体自定义样式	string	-
轮播容器宽度	轮播容器的宽度(px|%)	string	100%
轮播容器高度	轮播容器高度(px|%)	string	300px

Props 高级

参数	说明	类型	默认值
唯一标识	组件的唯一标识	string	-

Events

Events 属性

事件名	说明	回调参数
onChange	轮播图切换时	ctx: 上下文对象; params: {index: number, preIndex: number}

Type

RenderFunc

// ctx页面上下文对象
// params: {item: 当前渲染数据，index: 数据索引}
function render(ctx, params) {
  // 返回jsx渲染内容
  return <div style={{background: params.item.background, height: "100%"}}>
    {params.item.title}
  </div>
}