Tui-Plus3.0.0

Appearance

Swiper (轮播) ​

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

支持平台 ​

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

示例代码 ​

html
<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>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
indicatorActiveColorStringrgba(0,0,0,0.2)当前选项指示点的样式
currentNumber1当前激活的轮播项索引
durationNumber500动画持续时间，单位为毫秒
previousMarginString0前间距
disableTouchBooleanfalse是否禁用触摸
verticalBooleanfalse是否纵向显示
indicatorDotsBooleanfalse是否显示指示点
autoplayBooleanfalse是否自动播放
intervalNumber3000播放间隔时间，单位为毫秒
circularBooleantrue是否循环播放
nextMarginString0后间距
indicatorDotsClassString``其它指示点样式

插槽 ​

名称返回值说明
default-