轮播

轮播组件。
数据驱动。

基础使用

• 通过 list 属性设置轮播列表。
• 通过 current 属性设置激活项下标。

<template>
	<pure-swiper
		:list="list"
		:current="current"
	>
	</pure-swiper>
</template>

<script setup>
	import { ref } from "vue";

	// 列表数据
	const list = ref([
		{ src: "/static/images/w_9.jpeg" },
		{ src: "/static/images/w_2.jpeg" },
		{ src: "/static/images/w_3.jpeg" },
		{ src: "/static/images/w_4.jpeg" },
		{ src: "/static/images/w_5.jpeg" }
	]);

	// 当前激活项下标
	const current = ref(0);
</script>

显示数量

通过 displayMultipleItems 属性设置显示数量。
一般还需搭配 gap 属性设置项与项之间的间距。

<template>
	<pure-swiper
		:list="list"
		:current="current"
		:displayMultipleItems="2"
		gap="10px"
	>
	</pure-swiper>
</template>

<script setup>
	import { ref } from "vue";

	// 列表数据
	const list = ref([
		{ src: "/static/images/w_9.jpeg" },
		{ src: "/static/images/w_2.jpeg" },
		{ src: "/static/images/w_3.jpeg" },
		{ src: "/static/images/w_4.jpeg" },
		{ src: "/static/images/w_5.jpeg" }
	]);

	// 当前激活项下标
	const current = ref(0);
</script>

异形轮播

通过 scale 属性设置未激活项的缩放倍数。
一般还需搭配 gap、previous-margin、next-margin、circular 属性才能查看到具体的效果。

<template>
	<pure-swiper
		:list="list"
		:current="current"
		gap="10px"
		scale="0.88"
		previous-margin="50px"
		next-margin="50px"
		circular
		gap="10px"
	>
	</pure-swiper>
</template>

<script setup>
	import { ref } from "vue";

	// 列表数据
	const list = ref([
		{ src: "/static/images/w_9.jpeg" },
		{ src: "/static/images/w_2.jpeg" },
		{ src: "/static/images/w_3.jpeg" },
		{ src: "/static/images/w_4.jpeg" },
		{ src: "/static/images/w_5.jpeg" }
	]);

	// 当前激活项下标
	const current = ref(0);
</script>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
list	Array		数据
srcKey	String	src	图片地址键名
mode	String	aspectFill	资源裁剪模式
width	String	100%	宽度
height	String	422rpx	高度
radius	String	5px	圆角大小
preview	Boolean	false	是否开启点击预览
gap	String	0	项与项之间的间距
scale	[String, Number]	0.8	前、后项的缩放比例
indicator	Boolean	false	是否开启指示器
indicatorMode	String	line	指示器模式
indicatorOutside	Boolean	false	是否将指示器放置在 swiper 外部
color	String	undefined	指示器颜色
activeColor	String	undefined	指示器激活颜色
dotSize	String	undefined	圆点指示器大小
barWidth	String	undefined	条状指示器宽度
barHeight	String	undefined	条状指示器高度
indexSize	String	undefined	下标指示器大小
indexFontSize	String	undefined	下标指示器字体大小
lineWidth	String	undefined	线型指示器宽度
lineHeight	String	undefined	线型指示器高度
separator	String	undefined	数字指示器分隔符
progressWidth	String	undefined	进度指示器宽度
progressHeight	String	undefined	进度指示器高度
titleFontSize	String	undefined	标题指示器字体大小
titleKey	String	undefined	标题指示器键名
progressor	Boolean	false	是否显示切换器
progresorOpts	Object	{}	切换器配置
activeClass	String	undefined	swiper-item 可见时的 class 参考
changingClass	String	undefined	acceleration 设置为 true 时且处于滑动过程中，中间若干屏处于可见时的 class 参考
autoplay	Boolean	false	是否自动切换 参考
current	Number	0	当前所在滑块的 index 参考
currentItemId	String	undefined	当前所在滑块的 item-id ，不能与 current 被同时指定 参考
interval	Number	5000	自动切换时间间隔 参考
duration	Number	500	滑动动画时长 参考
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头 参考
vertical	Boolean	false	滑动方向是否为纵向 参考
previousMargin	String	0	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 参考
nextMargin	String	0	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 参考
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏 参考
disableProgrammaticAnimation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画 参考
displayMultipleItems	Number	1	同时显示的滑块数量 参考
skipHiddenItemLayout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 参考
disableTouch	Boolean	false	是否禁止用户 touch 操作 参考
easingFunction	String	linear	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic 参考

事件

名称	参数	说明
onClick	item: 数据项; index: 数据下标	滑块点击事件
onChange	event	切换事件 参考
onTransition	event	切换事件 参考
onAnimationFinish	event	切换事件 参考

TIP

切换事件参数 event.detail.source 新增了 indicator、progresor 来源。

• indicator：指示器触发切换。
• progresor：进度条触发切换。

插槽

名称	参数	说明
#default	item: 数据项; index: 数据下标	默认，滑块内容
#indicator		指示器
#progresor		进度条

样式变量

名称	说明
--pure-swiper-width	宽度
--pure-swiper-height	高度
--pure-swiper-border-radius	圆角大小
--pure-swiper-overflow	溢出模式
--pure-swiper-item-padding	滑块项内间距
--pure-swiper-item-active-transform	激活项变换
--pure-swiper-item-prev-transform	激活项之前的滑块项变换
--pure-swiper-item-prev-transform-origin	激活项之前的滑块项变换原点
--pure-swiper-item-next-transform	激活项之后的滑块项变换
--pure-swiper-item-next-transform-origin	激活项之后的滑块项变换原点
--pure-indicator-position	指示器定位方式
--pure-swiper-indicator-z-index	指示器层级
--pure-swiper-indicator-left	指示器定位位置
--pure-swiper-indicator-bottom	指示器定位位置
--pure-swiper-indicator-transform	指示器变换
--pure-swiper-indicator-margin	指示器内边距
--pure-swiper-indicator-padding	指示器外边距
--pure-swiper-indicator-background	指示器背景
--pure-swiper-indicator-font-size	指示器字体大小
--pure-swiper-indicator-font-weight	指示器字体粗细
--pure-swiper-indicator-color	指示器字体颜色
--pure-swiper-gap	轮播和指示器之间的距离
--pure-swiper-indicator-width	指示器宽度
--pure-swiper-indicator-display	指示器显示方式
--pure-swiper-indicator-direction	指示器内容布局方向
--pure-swiper-indicator-align-items	指示器内容布局对齐方式
--pure-swiper-indicator-justify-content	指示器内容布局对齐方式