<template>
  <!-- indicator-dots 是否显示面板指示点 -->
  <!-- indicator-color 指示点颜色 -->
  <!-- indicator-active-color 当前选中的指示点颜色 -->

  <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay">
    <swiper-item>
      <view class="swiper-item uni-bg-red">
        A
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item uni-bg-green">B</view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item uni-bg-blue">C</view>
    </swiper-item>
  </swiper>
</template>

<script setup>
  import { ref } from 'vue';

  const background = ref(['color1', 'color2', 'color3']);
  const indicatorDots = true;
  const autoplay = false;
</script>

<style lang="scss" scoped>
  .swiper {
    height: 100%;
  }
</style>
