轮播

介绍

用于循环播放一组图片或内容。

API

Props

Props 属性

参数	说明	类型	默认值
默认状态	组件的状态, "默认"|"隐藏"	string	'default'
当前索引项	当前展示的内容的索引值	number	-
数据配置	展示内容数据的配置	array	[{"title":"内容一","background":"pink"},{"title":"内容二","background":"orange"},{"title":"内容三","background":"teal"}]
自定义渲染函数	自定义每项轮播图的渲染内容，返回JSX	RenderFunc	""
自动循环	是否开启自动循环播放	boolean	false
自动切换时间间隔	自动播放时，每次切换之间的时间间隔，单位ms	number	3000
是否可以通过手势滑动	是否可以通过手势滑动	boolean	true
是否阻止滑动事件冒泡	是否阻止滑动事件冒泡	boolean	true
是否延迟渲染未展示的轮播	是否延迟渲染未展示的轮播	boolean	false
幻灯片移动方向	幻灯片移动方向,"横向"|"竖向"	string	"横向"
动画时长	幻灯片移动动画所需时长，单位ms	number	500
指示器	是否显示指示器	boolean	true

Props 样式

参数	说明	类型	默认值
自定义样式	表格整体自定义样式	string	-
轮播容器宽度	轮播容器的宽度，单位px或%	number	100%
轮播容器高度	轮播容器的高度，单位px或%	number	200px

Props 高级

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

Events

Events 属性

事件名	说明	回调参数
onChange	轮播图发生切换时触发	ctx, params: { index:number }, loopDataList: LoopData[]

Type

LoopData

参数名	描述	类型
indexName	索引变量名	string
paramName	迭代变量名	string
row	当前迭代数据元素	any
rowIndex	当前迭代数据索引	any
ref	完整循环数组数据	ComputedRefImpl<Array>

RenderFunc

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