Swiper (轮播)

弥补swiper组件APP端不支持previousMargin,nextMargin,无法实现卡片布局 画廊布局的痛点

支持平台

安卓	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>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
indicatorDots	Boolean	false	是否显示指示点
indicatorActiveColor	String	rgba(0,0,0,0.2)	当前选项指示点的样式
indicatorDotsClass	String	``	其它指示点样式
autoplay	Boolean	false	是否自动播放
current	Number	1	当前激活的轮播项索引
interval	Number	3000	播放间隔时间，单位为毫秒
duration	Number	500	动画持续时间，单位为毫秒
circular	Boolean	true	是否循环播放
previousMargin	String	0	前间距
nextMargin	String	0	后间距
disableTouch	Boolean	false	是否禁用触摸
vertical	Boolean	false	是否纵向显示

插槽

名称	返回值	说明
default	-