全部产品

swiper 滑块视图容器

更新时间:2020-11-11 17:49

滑块容器

扫码体验

image.png

子组件

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>

属性

属性名类型默认值说明
verticalBooleanfalse滑动方向是否为纵向
durationNumber500滑动动画时长,单位毫秒
circularBooleanfalse是否开启循环滑动
autoplayBooleanfalse是否自动切换
currentNumber0当前页面的索引
intervalNumber5000自动切换时间间隔,单位毫秒
indicator-dotsBooleanfalse是否显示指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorColor#000当前选中的指示点颜色
changeFunctioncurrent 改变时会触发,event.detail = {current: current}