跳到主要内容

轮播 Swiper

滑块视图容器。其中只可放 SwipeItem 组件，否则会导致未知的问题。

API

安装使用​

import { TiSwiper, TiSwiperItem } from '@titian-design/mobile-vue'

用法示例​

基础用法​

<template>
  <TiSwiper>
    <TiSwiperItem v-for="img in images" :key="img">
      <div class="swiper-item">
        <TiImage width="100%" height="300" mode="cover" :src="img" />
      </div>
    </TiSwiperItem>
  </TiSwiper>
</template>

<script lang="ts" setup>
import { TiSwiper, TiSwiperItem, TiImage } from '@titian-design/mobile-vue';

const images = [
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
  ];
  
</script>

设置无缝滚动​

<template>
  <TiSwiper loop>
    <TiSwiperItem v-for="img in images" :key="img">
      <div class="swiper-item">
        <TiImage width="100%" height="300" mode="cover" :src="img" />
      </div>
    </TiSwiperItem>
  </TiSwiper>
</template>

<script lang="ts" setup>
import { TiSwiper, TiSwiperItem, TiImage } from '@titian-design/mobile-vue';

const images = [
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
  ];
  
</script>

设置垂直滚动​

<template>
  <TiSwiper vertical>
    <TiSwiperItem v-for="img in images" :key="img">
      <div class="swiper-item">
        <TiImage width="100%" height="300" mode="cover" :src="img" />
      </div>
    </TiSwiperItem>
  </TiSwiper>
</template>

<script lang="ts" setup>
import { TiSwiper, TiSwiperItem, TiImage } from '@titian-design/mobile-vue';

const images = [
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
  ];
  
</script>

设置展示数量​

<template>
  <TiSwiper :display-multiple-items="1.5">
    <TiSwiperItem v-for="img in images" :key="img">
      <div class="swiper-item">
        <TiImage width="100%" height="300" mode="cover" :src="img" />
      </div>
    </TiSwiperItem>
  </TiSwiper>
</template>

<script lang="ts" setup>
import { TiSwiper, TiSwiperItem, TiImage } from '@titian-design/mobile-vue';

const images = [
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png",
    "https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
  ];
  
</script>

TiSwiper API​

属性 Properties​

名称类型必填默认值说明备注
verticalboolean否false是否为垂直方向滚动-
autoplayboolean否false是否自动播放-
intervalnumber否5000自动切换时间间隔, 当autoplay 值为 true 生效-
durationnumber否500滑动动画时长-
paginationbullets | fraction否none页码展示类型设置-
currentnumber否0初始化时所在滑块的 index-
display-multiple-itemsnumber否1每屏展示个内容个数-
space-betweennumber否10每个 item 之间的间距-
loopboolean否false无缝滚动-
centeredSlidesboolean否false居中幻灯片, 当设置 displayMultipleItems 时，会居中显示，两边平分设置额外内容-
ext-stylestring | Record<string, string> 否-根节点样式-

事件 Events​

名称参数列表描述备注
change(e: CustomEvent<{current: number;currentItemId: string;source: 'touch' |''; }>) => void切换结束时事,current 改变时触发件
animation-finish(e: CustomEvent<number>) => void动画结束事件-

CSS 变量 CSS Variables​

变量默认值说明备注
--swiper-duration500ms滑动动画时长-
--swiper-timing-functioneasy滑动动画-
--swiper-delay0滑动动画延迟-
--swiper-bullets-topauto指示点容器上侧位置-
--swiper-bullets-bottom12px指示点容器下侧位置-
--swiper-bullets-left50%指示点容器左侧位置-
--swiper-bullets-rightauto指示点容器右侧位置-
--swiper-bullets-transformtranslate(-50%, 0)--
--swiper-vertical-bullets-top50%--
--swiper-vertical-bullets-rightauto--
--swiper-vertical-bullets-bottomauto--
--swiper-vertical-bullets-left20px--
--swiper-vertical-bullets-transformtranslate(0, -50%)--
--swiper-bullet-width8px指示点宽度-
--swiper-bullet-height8px指示点高度-
--swiper-bullet-gap6px指示点间距-
--swiper-bullet-radius50%--
--swiper-bullet-active-bg-colorvar(--neutral-color-9, #ffffff)--
--swiper-fraction-right28px--
--swiper-fraction-bottom28px--
--swiper-fraction-leftauto--
--swiper-fraction-topauto--
--swiper-fraction-radius8px--
--swiper-fraction-bg-colorrgba(33, 33, 33, 60%)--
--swiper-pagination-current-colorvar(--swiper-pagination-color, var(--neutral-color-9, #ffffff))--
--swiper-pagination-current-font-sizevar(--swiper-pagination-font-size, 22px)--
--swiper-pagination-current-font-weightvar(--swiper-pagination-font-weight, 400)--
--swiper-pagination-current-line-heightvar(--swiper-paginaton-line-height, 22px)--
--swiper-pagination-slash-colorvar(--swiper-pagination-color, var(--neutral-color-9, #ffffff))--
--swiper-pagination-slash-font-sizevar(--swiper-pagination-font-size, 22px)--
--swiper-pagination-slash-font-weightvar(--swiper-pagination-font-weight, 400)--
--swiper-pagination-slash-line-heightvar(--swiper-paginaton-line-height, 22px)--
--swiper-pagination-total-colorvar(--swiper-pagination-color, var(--neutral-color-9, #ffffff))--
--swiper-pagination-total-font-sizevar(--swiper-pagination-font-size, 22px)--
--swiper-pagination-total-font-weightvar(--swiper-pagination-font-weight, @font-weight-400)--
--swiper-pagination-total-line-heightvar(--swiper-paginaton-line-height, 22px)--

TiSwiperItem Api​

属性 Properties​

名称类型必填默认值说明备注
item-idstring否-该 swiper-item 的标识符-
skip-hidden-item-layoutboolean否false是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息-