Swiper 轮播

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

import { DuSwiper, DuSwiperItem } from 'dangoui'

使用说明

DuSwiper 需要有一个确定的宽高（子组件被限制在这个宽高中），在小程序中，你可以通 ext-class 或者 ext-style 指定

示例

各种示例

<template>
  <PreviewBlock title="bar full + autoplay">
    <DuSwiper class="w-173px h-231px rd-8px" indicator-type="bar-full" autoplay>
      <DuSwiperItem>
        <div class="w-full h-full bg-red flex items-center justify-center">1</div>
      </DuSwiperItem>
      <DuSwiperItem>
        <div class="w-full h-full bg-blue flex items-center justify-center">2</div>
      </DuSwiperItem>
      <DuSwiperItem>
        <div class="w-full h-full bg-green flex items-center justify-center">3</div>
      </DuSwiperItem>
    </DuSwiper>
  </PreviewBlock>

  <PreviewBlock title="bar">
    <DuSwiper class="w-300px h-70px rd-8px" indicator-type="bar">
      <DuSwiperItem>
        <div class="w-full h-full bg-red flex items-center justify-center">1</div>
      </DuSwiperItem>
      <DuSwiperItem>
        <div class="w-full h-full bg-blue flex items-center justify-center">2</div>
      </DuSwiperItem>
      <DuSwiperItem>
        <div class="w-full h-full bg-green flex items-center justify-center">3</div>
      </DuSwiperItem>
    </DuSwiper>
  </PreviewBlock>

  <PreviewBlock title="number">
    <DuSwiper class="w-173px h-231px rd-8px" indicator-type="number">
      <DuSwiperItem>
        <div class="w-full h-full bg-red flex items-center justify-center">1</div>
      </DuSwiperItem>
      <DuSwiperItem>
        <div class="w-full h-full bg-blue flex items-center justify-center">2</div>
      </DuSwiperItem>
      <DuSwiperItem>
        <div class="w-full h-full bg-green flex items-center justify-center">3</div>
      </DuSwiperItem>
    </DuSwiper>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuSwiper, DuSwiperItem } from 'dangoui'
</script>

API

属性

属性名	类型	默认值	说明
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
indicator-type	`"number" \| "bar" \| "bar-full"`	`"bar"`	指示条类型
autoplay	`boolean`	`false`	自动轮播

插槽

名称
default