VUE3----Swiper滑动切换图片

Swiper滑动切换图片

可以切换焦点图,兼容小程序

<template>
	<view class="cc-swiper-container" v-if="imageList.length > 0">
		<swiper class="swiper"
			:class="swiperClassName" 
			:circular="circular" 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval" 
			:duration="duration"
			:disable-touch="disableTouch">
			<swiper-item v-for="(item, index) in imageList" :key="index">
				<image :src="item.image" mode="aspectFit" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import { useAttrs, computed } from 'vue'
	
	const props = defineProps({
		imageList: {
			type: Array,
			default: []
		},
		circular: {
			type: Boolean,
			default: true
		},
		indicatorDots:
### Vue-Awesome-Swiper 图片切换 Bug 解决方案 #### 版本兼容性注意事项 Vue-awesome-swiper 的不同版本与 Swiper 库存在严格的版本对应关系。对于 `vue-awesome-swiper` 3.1.3,对应的 Swiper 是 4.x 版本;而 `vue-awesome-swiper` 4.1.4 对应的是 Swiper 5 或者 6[^1]。 #### Cube 效果切换问题及其修复措施 针对 cubeEffect 切换过程中遇到的视觉异常现象——即在接近结尾处以及进入第二轮循环时发生的元素错位或乱飞情况,在尝试更新至最新版未解决问题的情况下,回退到更稳定的 `vue-awesome-swiper@3.1.3` 可有效规避此问题的发生[^2]。具体配置如下: ```javascript const swiperOptions = { effect: &#39;cube&#39;, cubeEffect: { slideShadows: false, shadow: false, shadowOffset: 0, shadowScale: 0 }, autoplay: { delay: 10000, stopOnLastSlide: false, disableOnInteraction: false, pauseOnMouseEnter: true, }, loop: true // 开启循环模式 }; ``` #### 自适应高度设置 为了实现竖直方向上的无缝滚动体验并确保组件能够响应其内部内容的变化动态调整大小,需加入 observer 和 observeParents 参数来增强监听机制,从而保障滑动功能正常运作[^3]。 ```javascript const swiperConfig = { direction : &#39;vertical&#39;, slidesPerView: 1, spaceBetween: 30, mousewheel: true, keyboard: true, observer: true, // 修改swiper自己或子元素时,自动初始化swiper observeParents: true // 修改swiper的父元素时,自动初始化swiper } ``` 通过上述配置可以改善图片切换过程中的用户体验,减少可能出现的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值