t-swiper-stretcheffect

SwiperStretchEffect 横向拉伸轮播组件 — 基于 Canvas 实现的拉伸效果轮播，当前项横向压缩滑出，下一项横向展开。

组件介绍

t-swiper-stretcheffect 是一个使用 Canvas 渲染的轮播组件，提供独特的横向拉伸切换动画效果。当前项在滑动时横向压缩并移出，下一项从另一侧横向拉伸展开。支持自动播放、循环轮播、指示点和点击事件。

基础用法

<template>
  <t-swiper-stretcheffect
    :list="bannerList"
    height="240px"
    :autoplay="true"
    :interval="3500"
    @change="handleChange"
    @click="handleClick"
  />
</template>

<script setup>
const bannerList = [
  { image: '/banner/1.jpg', title: '活动一', color: '#2979ff' },
  { image: '/banner/2.jpg', title: '活动二', color: '#19be6b' },
  { image: '/banner/3.jpg', title: '活动三', color: '#ff9800' }
]

const handleChange = (e) => {
  console.log('当前索引:', e)
}

const handleClick = (e) => {
  console.log('点击:', e.item, '索引:', e.index)
}
</script>

API

Props

属性名	说明	类型	默认值
list	轮播数据，支持 image/color/title/text/data	Array	—
height	组件高度	String / Number	'200px'
autoplay	是否自动播放	Boolean	true
current	当前索引	Number	0
duration	动画时长（ms）	Number	600
interval	自动播放间隔（ms）	Number	3500
circular	是否循环	Boolean	true
imageFit	图片填充模式，fill / cover	String	'cover'
swipeThreshold	滑动阈值（px），超过才触发切换	Number	60
indicatorDots	是否显示指示点	Boolean	true
dotColor	指示点默认颜色	String	—
dotActiveColor	指示点激活颜色	String	—
dotSize	指示点大小	Number	—
dotBottom	指示点底部距离	Number	—
radius	圆角半径（px）	Number	16

Events

事件名	说明	回调参数
change	切换时触发	number（当前索引）
click	点击当前项时触发	{ item, index }

Slots

无内置插槽，所有内容通过 list 属性配置。

注意事项

• 基于 Canvas 渲染，不支持内置插槽，内容通过 list 数据驱动
• list 中每项支持 image、color、title、text、data 字段
• imageFit 为 cover 时图片裁剪填充，fill 时拉伸填充
• 通过 swipeThreshold 控制滑动的灵敏度
• 指示点相关属性（dotColor / dotActiveColor / dotSize / dotBottom）不传时使用组件默认值