lanyun-carousel
介绍
通常用于展示活动等,循环播放同一类型的图片、文字等内容。
使用方法
import "../../components/lanyun-carousel/lanyun-carousel.stml";
例子
<lanyun-carousel
@change="handleChange"
@click="handleClick"
:current="current"
:data="carousel"
:show-index="true"
class="carousel"
text-background="rgba(0, 0, 0, 0.2)"
text-color="#fff"
/>
props 属性
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
current | 当前所在滑块的 index, 选填 | number \ | string | 0 |
data | 轮播图数据,具体参数见demo, 选填 | array | [] | |
show-index | 是否显示指示器, 选填 | boolean | true | |
interval | 自动切换时间间隔, 选填 | number | 5000 | |
text-background | 文本区域的背景颜色, 选填 | string | rgba(0, 0, 0, 0.4) | |
text-color | 文字颜色, 选填 | string | #fff |
events 事件
事件名 | 说明 | 回调参数 |
---|---|---|
change | 当轮播滑动后触发 | current : 当前滑块的index |
click | 当滑块被点击后触发 | current : 当前滑块的index |
帮助说明
轮播图需要设置一个高度,可以给一个class
进行设置