Carousel 走马灯
APP
PC
走马灯，轮播图
引入方式
数字生活网页应用工程中，不需要 import，直接使用组件标签即可。
import {Carousel, CarouselItem} from '@21cnfe/vui'
Vue.component('Carousel', Carousel)
Vue.component('CarouselItem', CarouselItem)
|
代码演示
基本用法
data 为传入的数据对象数组，使用作用域插槽的方式自定义轮播内容
<Carousel>
<carousel-item v-for="(item, index) in data" :key="index">
<img :src="item.url" />
</carousel-item>
</Carousel>
|
自定义样式
组件提供属性设置走马灯容器的宽高、轮播项宽度、图片滑动效果、边界滑动以及指示点样式
<carousel
dots
:dotStyle="dotStyle"
:dotActiveStyle="dotActiveStyle"
:easing="easing"
:sliderWidth="sliderWidth"
:sliderHeight="sliderHeight"
:sliderItmeWidth="sliderItmeWidth"
:edgeSliderDistance="edgeSliderDistance"
>
<carousel-item v-for="(item, index) in sliders" :key="index">
<img :src="item.url" />
</carousel-item>
</carousel>
|
无限轮播
使用 infinite 开启无限轮播模式
<carousel
infinite
dots
:sliderWidth="0.8"
:sliderItemWidth="1"
sliderHeight="160px"
>
<carousel-item v-for="(item, index) in sliders" :key="index">
<img :src="item.url" />
</carousel-item>
</carousel>
|
自动播放
使用 autoplay 开启自动播放模式，需搭配无限轮播一起使用，可使用 autoplayInterval 设置播放时间间隔
<carousel
autoplay
infinite
dots
:sliderWidth="0.8"
:sliderItemWidth="1"
sliderHeight="160px"
>
<carousel-item v-for="(item, index) in sliders" :key="index">
<img :src="item.url" />
</carousel-item>
</carousel>
|
带有按钮
使用 hasButton 开启带有按钮，用于切换轮播项
<carousel
hasButton
dots
infinite
:dotStyle="dotStyle"
:dotActiveStyle="dotActiveStyle"
:sliderWidth="0.8"
:sliderItemWidth="1"
sliderHeight="160px"
>
<carousel-item v-for="(item, index) in sliders" :key="index">
<img :src="item.url" />
</carousel-item>
</carousel>
|
带有间距
属性 cellSpacing 设置轮播项之间的间距
<carousel
dots
:cellSpacing="30"
:edgeSliderDistance="0.3"
:sliderWidth="1"
:sliderItemWidth="0.7"
sliderHeight="160px"
>
<carousel-item v-for="(item, index) in sliders" :key="index">
<img :src="item.url" />
</carousel-item>
</carousel>
|
轮播项位置
属性 ItemPosition 用于设置当前轮播项的位置，适用于搭配间距属性
<carousel
dots
ItemPosition="center"
:cellSpacing="30"
:edgeSliderDistance="0.3"
:sliderWidth="1"
:sliderItemWidth="0.6"
sliderHeight="160px"
>
<carousel-item v-for="(item, index) in sliders" :key="index">
<img :src="item.url" />
</carousel-item>
|
API
| 属性 |
说明 |
类型 |
默认值 |
data |
传入的数据数组 |
Array |
-- |
selectedIndex |
手动设置当前显示的索引 |
Number |
0 |
dots |
是否显示面板指示点 |
Boolean |
false |
dotStyle |
指示点样式 |
Object |
-- |
dotActiveStyle |
当前激活的指示点样式 |
Object |
-- |
slideWidth |
手动设置容器宽度，可以是slideWidth="200px"，也可以是相对屏幕的百分比slideWidth=0.8 |
String | Number |
1 |
slideHeight |
手动设置容器高度，与设置容器宽度方式同理 |
String | Number |
1 |
sliderItemWidth |
手动设置轮播单项宽度，可以是slideItemWidth="200px"，也可以是相对 sliderWidth 的百分比 slideItemWidth=0.8 |
String | Number |
1 |
easing |
滑动动画，值为带有时间和动画曲线函数名的字符串（参考默认值写法） |
String |
transform 0.4s ease |
edgeSliderDistance |
非循环模式的边界滑动限制，值为0~1的数值，是相对于轮播单项的宽度百分比 |
Number |
0.5 |
cellSpacing |
项目之间的间距，以 px 为单位 |
Number |
0 |
ItemPosition |
搭配 cellSpacing 使用，定位当前轮播项位置，可选值 [left, center] |
String |
left |
infinite |
无限循环轮播模式 |
Boolean |
false |
autoplay |
自动轮播模式，需搭配无限轮播一起使用 |
Boolean |
false |
autoplayInterval |
自动轮播时间间隔，单位毫秒 |
Number |
3000 |
hasButton |
提供按钮进行轮播项前后切换 |
Boolean |
false |
Event
| 事件名称 |
说明 |
回调参数 |
onChange |
change 事件触发的回调函数，返回当前轮播项索引值 |
void(currentIndex) |
Slot
| 属性 |
说明 |
匿名插槽 |
插入子组件 CarouselItem |
Slot(CarouselItem)
