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>

属性