跳到主要内容

轮播 Swiper

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

用法示例

基础用法

<ti-swiper>
<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
></ti-image>
</div>
</ti-swiper-item>
</ti-swiper>

设置无缝滚动

<ti-swiper loop>
<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
></ti-image>
</div>
</ti-swiper-item>
</ti-swiper>

设置垂直滚动

<ti-swiper vertical>
<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
></ti-image>
</div>
</ti-swiper-item>
</ti-swiper>

设置展示数量

<ti-swiper display-multiple-items="1.5">
<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
></ti-image>
</div>
</ti-swiper-item>
</ti-swiper>

当一屏需要展示两边内容时

<ti-swiper display-multiple-items="1.5" centered-slides loop>
<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default2.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default3.png"
></ti-image>
</div>
</ti-swiper-item>

<ti-swiper-item>
<div class="swiper-item">
<ti-image
width="100%"
height="300"
mode="cover"
src="https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default4.png"
></ti-image>
</div>
</ti-swiper-item>
</ti-swiper>

TiSwiper API

属性 Properties

名称类型必填默认值说明备注
verticalbooleanfalse是否为垂直方向滚动-
autoplaybooleanfalse是否自动播放-
intervalnumber5000自动切换时间间隔, 当autoplay 值为 true 生效-
durationnumber500滑动动画时长-
paginationbullets | fractionnone页码展示类型设置-
currentnumber0初始化时所在滑块的 index-
display-multiple-itemsnumber1每屏展示个内容个数-
space-betweennumber10每个 item 之间的间距-
loopbooleanfalse无缝滚动-
centered-slidesbooleanfalse居中幻灯片, 当设置 displayMultipleItems 时,会居中显示,两边平分设置额外内容-
extStylestring | Record<string, string> -根节点样式-

事件 Events

名称参数列表描述备注
onChange(e: CustomEvent<{current: number; currentItemId: string; source: 'touch' |''; }>) => void切换结束时事,current 改变时触发件
onAnimationFinish(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-layoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息-