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 previousMargin="60" nextMargin="60" main-class="tdr" :circular="true" :interval="5000" type="p"
				:indicator-dots="true" :vertical="false" :duration="1000" @change="change"
				@animationfinish="animationfinish" @transition="onanimationfinish" :disableTouch="false"
				:autoplay="true" :current="current" :indicatorDots='true'>
				<t-swiper-item v-for="(item,index) in list1"
					:main-class="`atp-tr atd-500 fc ${index==current?'ats-1':'ats-0.9'}`" :key="index">
					<t-image main-class="twh-100% tdr" :src="`${item['url']}`" />
				</t-swiper-item>
			</t-swiper>
		</t-col>
		<!-- <t-section title='纵向卡片' main-class="tdr tdb mb-30"></t-section>
		<t-col main-class="tdr tdb mb-30 fc">
			<t-swiper :vertical="true" main-class="h-700 tdr tdb w-300" :circular="true" :duration="1000"
				:interval="5000" previousMargin="80rpx" nextMargin="80rpx" :indicatorDots='true' @change="change"
				:autoplay="true">
				<t-swiper-item :main-class="`atp-tr atd-500 ${index==current?'ats-1':'ats-0.9'}`"
					v-for="(item,index) in list" :key="index">
					<t-row main-class="twh-100% fc dx">
						<t-image main-class="twh-100% tdr" :src="`${item['url']}`" />
					</t-row>
				</t-swiper-item>
			</t-swiper>
		</t-col>
		<t-card main-class="tdr tdb mb-30" title="更多用法"
			sub-title="previousMargin和nextMargin不同的值展示效果(能实现同时展示张图片)"></t-card>
		<t-col main-class="tdr tdb mb-30">
			<t-swiper previousMargin="0" nextMargin="320" main-class="tdr" :circular="true" :interval="5000"
				:vertical="false" :duration="1000" @change="change" @animationfinish="animationfinish"
				@transition="onanimationfinish" :disableTouch="false" :autoplay="true" :indicatorDots='true'>
				<t-swiper-item v-for="(item,index) in list1" :key="index">
					<t-image main-class="twh-100%" :src="`${item['url']}`" />
				</t-swiper-item>
			</t-swiper>
		</t-col> -->
		<t-button @click="test" type="p" main-class="mb-30">增加数据</t-button>
		<t-button @click="test1" type="s">减少数据</t-button>
		<t-row main-class="h-500px"></t-row>
	</t-page>
</template>

<script>
	import { TuiSwiperEvent } from '@/uni_modules/tui-plugins'
	export default {
		data() {
			return {
				current: 1,
				sty: [`padding:30rpx;background-color:#fff;`],
				list1: [
					{
						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[],
				list: [
					{
						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[]
			}
		},
		methods: {
			test() {
				this.list1.push({
					url: '/pagesA/static/image/swiper1.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
					poster: '',
					type: ''
				})
			},
			change(e : TuiSwiperEvent) {
				this.current = e.detail.current
			},
			test1() {
				this.list1.splice(0, 1)
			},
			settingCur() {
				this.current = 2
			},
			onanimationfinish(e : TuiSwiperEvent) {
				// console.log(Math.floor(e.detail.dx!))
			},
			animationfinish(e : TuiSwiperEvent) {
				// console.log(e.detail.current)
			}
		}
	}
</script>

事件

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

插槽

名称	返回值	说明
default	-