轮播图
使用方式
<template>
<sp-swiper>
<div v-for="(item, index) in swiper" :key="index">
<a :href="item.link">
<img :src="item.img">
</a>
</div>
</sp-swiper>
</template>
<script>
data() {
return {
swiper: [
{
link: 'http://www.baidu.com',
img: 'http://www.photos.com'
},{
link: 'http://www.google.com',
img: 'http://www.photos.com'
}
]
}
}
</script>
sp-swiper
props/属性
| 参数 |
类型 |
默认值 |
作用 |
| loop |
Boolean |
true |
循环滚动 |
| autoPlay |
Boolean |
true |
主动轮播 |
| interval |
Number |
3000 |
每个多秒轮播一次 |
| showDot |
Boolean |
true |
显示指示点 |
| click |
Boolean |
true |
是否允许点击 |
| threshold |
Number |
0.3 |
滑动到下一个的阈值 |
| speed |
Number |
400 |
每次滚动所用时间 |