轮播

介绍

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

API

Props

参数名	描述	类型	默认值
status	默认状态	'default' | 'readonly' | 'hide'	'default'
current	当前索引项	number	-
data	数据配置	CarouselItem[]	-
customRender	自定义渲染函数	RenderFunc	-
autoPlay	自动循环	boolean	false
interval	自动切换时间间隔。单位：毫秒	number	3000
hoverToPause	鼠标悬浮时暂停自动切换。自动循环开启后鼠标悬浮时是否暂停自动切换	boolean	true
animationName	切换动画	'slide' | 'fade' | 'card'	'slide'
trigger	幻灯片切换触发方式	'click' | 'hover'	'click'
direction	幻灯片移动方向	'horizontal' | 'vertical'	'horizontal'
moveSpeed	幻灯片移动速率。幻灯片切换的动画时间，单位：毫秒	number	500
showArrow	切换箭头显示时机	'always' | 'hover' | 'never'	'always'
indicatorType	指示器类型	'line' | 'dot' | 'slider' | 'never'	'dot'
indicatorPosition	指示器位置	'top' | 'bottom' | 'left' | 'right'	'bottom'
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
width	轮播容器宽度。单位：px|%	string	100%
height	轮播容器高度。单位：px|%	string	300px
uniqueKey	唯一标识, 组件的唯一标识	string	-

Events

事件名	描述	参数
onChange	轮播图切换时触发	ctx:PangeaContext params:{ index: number, isManual: boolean preIndex: number } loop:LoopParams

Type

// 轮播数据项
type CarouselItem = {
  title: string,
  background: string,
};

// 自定义渲染函数
type RenderFunction = (ctx: PangeaContext, params: any) => JSX.Element;

// 循环变量数据参数
type LoopParams = {
  indexName: string,
  paramName: string,
  ref: ComputedRefImpl, // 全部的循环变量数据
  row: any,
  rowIndex: number,
}[];