swiper 滑块视图容器
滑块容器
扫码体验
子组件
swiper-item
仅可放置在 swiper 中,宽高自动撑满。
示例代码
<template>
<swiper
:indicator-dots="showDots"
:autoplay="autoplay"
:interval="interval"
class="swiper-container"
indicator-color="rgba(255,255,255,0.6)"
indicator-active-color="#00653E"
:circular="circular"
>
<swiper-item>
<view class="swiper-item">
<image class='swipe-pic' src="https://gw.alicdn.com/bao/uploaded/TB12bMPGHSYBuNjSspiXXXNzpXa-60-36.png" />
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image class='swipe-pic' src="https://gw.alicdn.com/bao/uploaded/TB12bMPGHSYBuNjSspiXXXNzpXa-60-36.png" />
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image class='swipe-pic' src="https://gw.alicdn.com/bao/uploaded/TB12bMPGHSYBuNjSspiXXXNzpXa-60-36.png" />
</view>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
showDots: true,
autoplay: true,
interval: 3000,
circular: false,
}
}
}
</script>
属性
属性名 | 类型 | 默认值 | 说明 |
vertical | Boolean | false | 滑动方向是否为纵向 |
duration | Number | 500 | 滑动动画时长,单位毫秒 |
circular | Boolean | false | 是否开启循环滑动 |
autoplay | Boolean | false | 是否自动切换 |
current | Number | 0 | 当前页面的索引 |
interval | Number | 5000 | 自动切换时间间隔,单位毫秒 |
indicator-dots | Boolean | false | 是否显示指示点 |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 |
indicator-active-color | Color | #000 | 当前选中的指示点颜色 |
change | Function | current 改变时会触发,event.detail = {current: current} |