T-UVUE-UI1.0.0

Appearance

swiper 轮播 ​

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

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<template>
	<t-page title='轮播图' class="p.30">
		<t-card class="tdr-tdb-mb.30" title="Swiper 轮播图" sub-title="自研轮播实现,轻松实现卡片布局 画廊布局"></t-card>
		<t-section title='横向卡片' class="tdr-tdb-mb.30"></t-section>
		<t-row class="tdr-tdb-mb.30">
			<t-swiper previousMargin="80rpx" nextMargin="80rpx" :card="true" :circular="true" :disableTouch="false"
				:autoplay="false" :current="0" :indicatorDots='true'>
				<t-swiper-item v-for="(item,index) in list1" :key="index" :id="`swiper${index}`">
					<t-row class="twh.100%-fc-dx">
						<t-image class="twh.100%-tdr" :src="`${item['url']}`" />
					</t-row>
				</t-swiper-item>
			</t-swiper>
		</t-row>
		<t-section title='纵向卡片' class="tdr-tdb-mb.30"></t-section>
		<t-row class="tdr-tdb-mb.30-fc">
			<t-swiper :vertical="true" class="h.700-w.300-m.50-tdr-tdb" :circular="true" :duration="300" :card="true"
				previousMargin="80rpx" nextMargin="80rpx" :indicatorDots='true'>
				<t-swiper-item v-for="(item,index) in list" :key="index">
					<t-row class="twh.100%-fc-dx">
						<t-image class="twh.100%-tdr" :src="`${item['url']}`" />
					</t-row>
				</t-swiper-item>
			</t-swiper>
		</t-row>
		<t-row class="h.500px"></t-row>
	</t-page>
</template>

<script>
	import { TuiSwiperEvent } from '@/uni_modules/t-ui'
	export default {
		data() {
			return {
				current: 0,
				current1: 0,
				sty: [`padding:30rpx;background-color:#fff;`],
				list1: [
					{
						url: '/static/image/swiper2.png',
						title: '身无彩凤双飞翼，心有灵犀一点通,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						poster: '',
						type: ''
					}, {
						url: '/static/image/swiper1.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						poster: '',
						type: ''
					}, {
						url: '/static/image/swiper2.png',
						title: '身无彩凤双飞翼，心有灵犀一点通,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						poster: '',
						type: ''
					}, {
						url: '/static/image/swiper1.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						poster: '',
						type: ''
					}] as UTSJSONObject[],
				list: [
					{
						url: '/static/image/Z1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东',
						poster: 'https://life.yundie.xyz/static/image/20230310/w400/a5e5aa163ae34d47b854c09649196fdb.png',
						type: ''
					},
					{
						url: '/static/image/Z2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳,谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						poster: '',
						type: ''
					}, {
						url: '/static/image/Z3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						poster: '',
						type: ''
					}] as UTSJSONObject[]
			}
		},
		methods: {
			onanimationfinish(e : UniSwiperTransitionEvent) {
				console.log(e.detail.dx)
			},
			animationfinish(e : TuiSwiperEvent) {
				console.log(e.detail.dxy)
			}
		}
	}
</script>

<style lang="scss">
	.item-content {
		height: 100%;
		width: 100%;
	}

	.t-swiper-title {
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 15rpx 20rpx;

		// display: flex;
		// align-items: center;
		// justify-content: center;
		.txt {
			font-size: 25rpx;
			color: #fff;
			// lines: 1;
			/* #ifdef WEB */
			white-space: nowrap;
			text-overflow: ellipsis;
			/* #endif */
		}
	}
</style>

Props ​

名称描述类型默认值可选值
card是否为卡片模式Booleanfalsetrue, false
type轮播类型String'p''p', 'v'
indicatorDots是否显示指示点Booleanfalsetrue, false
indicatorDotsClass指示点的类名String''-
indicatorActiveColor指示点激活的颜色String''-
autoplay是否自动播放Booleanfalsetrue, false
current当前激活的轮播项索引Number0-
interval播放间隔时间，单位为毫秒Number3000-
duration动画持续时间，单位为毫秒Number500-
circular是否循环播放Booleantruetrue, false
previousMargin前间距String'0'-
nextMargin后间距String'0'-
disableTouch是否禁用触摸Booleanfalsetrue, false
vertical是否纵向显示Booleanfalsetrue, false
easingFunction缓动函数String'ease-out'-

Events ​

事件名描述回调参数版本
animationfinish当动画结束时触发(event: TuiSwiperEvent)-
change当轮播项改变时触发(event: TuiSwiperEvent)-
transition当轮播项过渡时触发(event: TuiSwiperEvent)-

Slots ​

名称描述
default轮播图内容区域