SwiperItem (轮播子组件)

轮播图，支持配置卡片模式、轮播类型、指示点显示、指示点类名、指示点激活颜色、自动播放、当前激活的轮播项、播放间隔、动画持续时间、循环播放、前后间距、禁用触摸、纵向显示、缓动函数等。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page main-class="p-30">
		<t-card main-class="tdr tdb mb-30" title="Swiper 轮播图" sub-title="自研轮播实现,轻松实现卡片布局 画廊布局"></t-card>
		<t-card main-class="tdr tdb mb-30" title="亮点"
			sub-title="主要解决swiper组件APP端不支持previousMargin,nextMargin,无法实现卡片布局 画廊布局的痛点"></t-card>
		<t-section title='横向卡片' main-class="tdr tdb mb-30"></t-section>
		<t-col main-class="tdr tdb mb-30">
			<t-swiper-card :list="list1" main-class="mt-30" class="swipercard" previousMargin="60" nextMargin="60"
				:autoplay="true">
				<template #default={item}>
					<t-image main-class="twh-100% tdr" :src="`${(item as UTSJSONObject)['url']}`" />
				</template>
			</t-swiper-card>
		</t-col>
		<t-section title='纵向卡片' main-class="tdr tdb mb-30"></t-section>
		<t-col main-class="tdr tdb mb-30">
			<t-swiper-card :list="list" main-class="mt-30 w-300 h-600" class="swipercard" previousMargin="60"
				nextMargin="60" :vertical="true" :autoplay="true">
				<template #default={item}>
					<t-image main-class="twh-100% tdr" :src="`${(item as UTSJSONObject)['url']}`" />
				</template>
			</t-swiper-card>
		</t-col>
	</t-page>
</template>

<script setup>
	const list1 = ref<UTSJSONObject[]>([
		{
			url: '/pagesA/static/image/swiper2.png',
			title: '身无彩凤双飞翼，心有灵犀一点通,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
			poster: '',
			type: ''
		}, {
			url: '/pagesA/static/image/swiper1.png',
			title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
			poster: '',
			type: ''
		}, {
			url: '/pagesA/static/image/swiper2.png',
			title: '身无彩凤双飞翼，心有灵犀一点通,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
			poster: '',
			type: ''
		}] as UTSJSONObject[])
	const list = ref<UTSJSONObject[]>([
		{
			url: '/pagesA/static/image/Z1.jpg',
			title: '昨夜星辰昨夜风，画楼西畔桂堂东',
			poster: 'https://life.yundie.xyz/pagesA/static/image/20230310/w400/a5e5aa163ae34d47b854c09649196fdb.png',
			type: ''
		},
		{
			url: '/pagesA/static/image/Z2.jpg',
			title: '身无彩凤双飞翼，心有灵犀一点通,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
			poster: '',
			type: ''
		}, {
			url: '/pagesA/static/image/Z3.jpg',
			title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
			poster: '',
			type: ''
		}] as UTSJSONObject[])
</script>

事件

名称	返回参数	说明
click	(e : UniPointerEvent)	-

插槽

名称	返回值	说明
default	-