轮播图
使用方式
<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 |
每次滚动所用时间 |