Tantalum UI

Appearance

Return to top
On this page

Swiper/SwiperItem 轮播

vue
<template>
  <ta-group title="基础用法">
    <ta-swiper class="exp-swiper-box">
      <ta-swiper-item v-for="(item, index) in swiperList" :key="item">
        <div class="exp-swiper-box-item" :class="{ even: index % 2 == 1 }">
          {{ item }}
        </div>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
  <ta-group title="显示面板指示点 indicator-dots=true">
    <ta-swiper class="exp-swiper-box" indicator-dots>
      <ta-swiper-item v-for="url in imageUrls" :key="url">
        <ta-image class="exp-swiper-image" :src="url"></ta-image>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
  <ta-group title="显示切换按钮 navigation-buttons=true">
    <ta-swiper class="exp-swiper-box" navigation-buttons>
      <ta-swiper-item v-for="url in imageUrls" :key="url">
        <ta-image class="exp-swiper-image" :src="url"></ta-image>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
  <ta-group title="循环展示 initial-circular=true">
    <ta-swiper class="exp-swiper-box" indicator-dots initial-circular>
      <ta-swiper-item v-for="(item, index) in swiperList" :key="item">
        <div class="exp-swiper-box-item" :class="{ even: index % 2 == 1 }">
          {{ item }}
        </div>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
  <ta-group title="垂直方向 initial-vertical=true">
    <ta-swiper class="exp-swiper-box" indicator-dots initial-vertical>
      <ta-swiper-item v-for="(item, index) in swiperList" :key="item">
        <div class="exp-swiper-box-item" :class="{ even: index % 2 == 1 }">
          {{ item }}
        </div>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
  <ta-group title="更改指示点颜色">
    <ta-swiper
      class="exp-swiper-box"
      indicator-dots
      indicator-color="rgba(255, 255, 255, 0.5)"
      indicator-active-color="#ff4d4f"
    >
      <ta-swiper-item v-for="(item, index) in swiperList" :key="item">
        <div class="exp-swiper-box-item" :class="{ even: index % 2 == 1 }">
          {{ item }}
        </div>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
  <ta-group title="自动轮播（切换时长设置为3000ms）">
    <ta-swiper class="exp-swiper-box" indicator-dots :autoplay="autoplay" :interval="3000">
      <ta-swiper-item v-for="url in imageUrls" :key="url">
        <ta-image class="exp-swiper-image" :src="url"></ta-image>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
  <ta-group title="滑动过程时长（设置为2000ms）">
    <ta-swiper class="exp-swiper-box" indicator-dots :duration="2000">
      <ta-swiper-item v-for="url in imageUrls" :key="url">
        <ta-image class="exp-swiper-image" :src="url"></ta-image>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
  <ta-group title="事件监听（change/animated/click）">
    <ta-swiper
      ref="swiperRef"
      class="exp-swiper-box"
      indicator-dots
      v-model:activeIndex="activeIndex"
      @activeIndexChange="onChange"
      @animated="onAnimated"
      @click="showToast(`click 触发`)"
    >
      <ta-swiper-item v-for="(item, index) in swiperList" :key="item">
        <div class="exp-swiper-box-item" :class="{ even: index % 2 == 1 }">
          {{ item }}
        </div>
      </ta-swiper-item>
    </ta-swiper>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import {
  showToast,
  type SwiperOnAnimated,
  type SwiperOnActiveIndexChange,
  type SwiperRef
} from '@/index'

export default defineComponent({
  name: 'ExpSwiper',
  setup() {
    const activeIndex = ref(0)
    const swiperRef = ref<SwiperRef | null>(null)

    const onChange: SwiperOnActiveIndexChange = index => {
      showToast(`change 到第 ${index + 1} 张`)
      console.log('change', index)
    }

    const onAnimated: SwiperOnAnimated = index => {
      showToast(`第 ${index + 1} 张 animated`)
      console.log('animated', index)
    }

    onMounted(() => {
      // swiperRef.value?.next()
    })

    return {
      swiperRef,
      swiperList: [1, 2, 3, 4],
      imageUrls: [
        'https://cdn.fox2.cn/vfox/swiper/regular-1.jpg',
        'https://cdn.fox2.cn/vfox/swiper/regular-2.jpg',
        'https://cdn.fox2.cn/vfox/swiper/regular-3.jpg'
      ],
      activeIndex,
      autoplay: true,

      showToast,
      onChange,
      onAnimated
    }
  }
})
</script>

Import

js
import { TaSwiper, TaSwiperItem } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { SwiperOnActiveIndexChange, SwiperOnAnimated, SwiperRef } from 'tantalum-ui-mobile'

Swiper Props

属性类型默认值必填说明
v-model:active-indexnumber0否当前所在滑块的 index
indicator-dotsbooleanfalse否是否显示面板指示点
indicator-colorcolor'rgba(0, 0, 0, 0.4)'否指示点颜色
indicator-active-colorcolor'rgba(255, 255, 255, 0.8)'否当前选中的指示点颜色
autoplaybooleanfalse否是否自动切换
intervalnumber5000否自动切换时间间隔
durationnumber否滑动动画时长，没有设置时使用内置调优时长
initial-circularbooleanfalse否初始设置是否循环切换
initial-verticalbooleanfalse否初始设置是否为纵向滑动
navigation-buttonsbooleanfalse否是否展示上一页/下一页按钮

Swiper Events

事件描述回调函数参数TypeScript 函数
active-index-change切换时触发( activeIndex: number, fromIndex: number )SwiperOnActiveIndexChange
animated动画结束时触发( activeIndex: number, fromIndex: number )SwiperOnAnimated
click点击时触发，为了区分滑动情况

Swiper Slots

#default

注：其中只可放置 SwiperItem 组件，否则会导致未定义的行为。

vue
<ta-swiper>
  <ta-swiper-item>
    <ta-image src="a.jpg" />
  </ta-swiper-item>
  <ta-swiper-item>
    <ta-image src="b.jpg" />
  </ta-swiper-item>
  ...
</ta-swiper>

SwiperItem Slots

#default

vue
<ta-swiper-item>
  <ta-image src="b.jpg" />
</ta-swiper-item>

Methods

ts
interface SwiperRef {
  swipeTo: (newIndex: number) => void
  prev: () => void
  next: () => void
}
方法名说明
swipeTo切换到指定 index 的 Item
prev切换到上一个 Item，如果当前在第一个 ，则循环到最后一个
next切换到下一个 Item，如果当前在最后一个，则循环到第一个