滑动微件

滑动微件使用了 Swiper 库进行组件卡片的滚动效果展现.

在故事编辑界面, 点击工具栏中插入区域更多里的"滑动微件", 在当前页面中创建一个滑动微件. 选中此组件后在右侧属性编辑栏中对其设置进行编辑:

滑动属性

滑动微件的整体属性设置, 对应到 Swiper 库里的属性.

属性列表:

名称	属性	描述
每屏卡片数	slidesPerView	Number of slides per view (slides visible at the same time on slider's container).
卡片间隔	spaceBetween	Distance between slides in px.
居中	centeredSlides	active slide will be centered, not always on the left side.
方向	direction	'horizontal' / 'vertical'
抓手	grabCursor	This option may a little improve desktop usability. If true, user will see the "grab" cursor when hover on Swiper
循环	loop	Set to true to enable continuous loop mode.
效果	effect	Transition effect. Can be 'slide', 'fade', 'cube', 'coverflow', 'flip' or 'creative'
创意效果	creativeEffect	Object with Creative-effect parameters.

幻灯片

幻灯片表格配置是对滑动微件进行配置的表格, 点击表格下方的新增按钮添加新行即新的一个滑动微件. 每个卡片行配置属性如下:

• 组件类型: 卡片所使用的组件类型, 目前支持:
  • 分析卡片: 对应图形分析组件;
  • 指标卡片: 对应指标卡片组件;
• 详情: 对选择的组件类型进行相应的详细配置, 具体参考对应的组件类型配置;
• 操作: 删除当前配置行;

幻灯片属性列表:

名称	说明	详细信息
组件类型		1. 指标卡片; 2. 分析卡片;
详情配置	打开指定组件类型的具体配置界面
操作	删除按钮, 删除当前行幻灯片配置

自动播放

自动播放属性列表:

名称	属性	描述
延迟	delay	每次变换的延迟时间
交互时暂停	disableOnInteraction
鼠标悬停暂停	pauseOnMouseEnter
反向	reverseDirection
最后一张停止	stopOnLastSlide
等待过渡	waitForTransition

分页

分页属性列表:

名称	属性	描述
启用	enabled
类型	type	'bullets' / 'fraction' / 'progressbar'
点击	clickable	clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type
点击隐藏	hideOnClick
动态子弹	dynamicBullets

对应 Swiper Pagination Parameters 属性配置.

自适应断点

自适应断点属性，允许为不同的响应断点（屏幕大小）设置不同的参数。不是所有的参数都可以在断点上更改，只有那些不需要不同布局和逻辑的参数，如 slidesPerView、slidesPerGroup、spaceBetween、grid.rows。这样的参数，如 loop 和 effect 不会生效。

自适应断点属性列表:

名称	属性	描述
大小	size	when window width is >= [size]px
每屏卡片数	slidesPerView	同滑动属性
卡片间隔	spaceBetween	同滑动属性
触摸率	touchRatio	触摸灵敏度
操作		删除配置

对应 Initialize Swiper breakpoints 属性配置.

示例