轮播容器
Swiper
#
适用场景用于快速在页面搭建轮播图展示效果,并支持轮播图的跳转、播放配置。
使用方法
通过数据源数据/变量控制对轮播图的展示内容进行控制
当存在需要使用数据进行轮播图内容管理的场景下,我们可以使用轮播容器组件实现,操作方式如下:
- 在编辑区中添加一个轮播容器组件,并将图片组件添加轮播容器的子节点下
- 为图片组件通过绑定循环功能,绑定用来控制轮播图内容的循环/普通变量,绑定完成后轮播图即可根据变量中的数据进行渲染
使用轮播容器实现高级的轮播场景
我们可以使用轮播容器实现更为复杂的轮播场景,如下图所示:
- 为轮播容器的子节点下添加普通容器组件,并在普通容器组件的子节点下添加图片以及按钮组件
- 设置按钮组件的定位模式为固定,并进行位置的调整后即可实现类似的复杂轮播场景。
属性介绍
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
---|
自动切换时间间隔(毫秒) | interval | number | 配置轮播图滚动的时间间隔,时间单位为ms 示例:5000 |
纵向轮播 | vertical | boolean | 开启后,轮播的滚动方式将会由横向滚动变更为纵向滚动 示例:false |
自动切换 | autoplay | boolean | 开启后,轮播图将会自动根据配置的时间间隔进行自动滚动,关闭后则轮播图仅支持通过点击锚点的方式进行切换 示例:true |
锚点激活色 | indicatorActiveColor | string | 更改锚点选中时的颜色 示例:"rgba(0, 0, 0, 0.9)" |
锚点颜色 | indicatorColor | string | 更改锚点普通状态下的颜色 示例:"rgba(200, 200, 200, 0.9)" |
滑动动画时长 | duration | number | 更改轮播图切换时的滑动动画时长 示例:500 |
当前所在滑块的 index | current | number | 更改轮播图的默认展示位置,0为默认展示第一张轮播图,以此类推 示例:0 |
衔接滑动 | circular | boolean | 更改轮播图切换时动画的滑动方式 示例:true |
导航锚点 | indicatorDots | boolean | 开启/关闭轮播图锚点 示例:true |
事件介绍
组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
切换 | change | 兼容三端 | - |
组件使用限制
需注意,由于小程序端样式限制问题,轮播容器中的图片高度不得设置为 auto,否则将无法渲染。