uniapp 轮播图预览图片转圈问题

最新推荐文章于 2025-06-14 17:04:56 发布

paidaboluo

最新推荐文章于 2025-06-14 17:04:56 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/paidaboluo/article/details/126798808

本文介绍了如何在uniapp中利用swiper组件创建轮播图，包括设置indicator-dots、autoplay等属性，以及通过v-for动态渲染swiper-item来展示内容。同时，分享了uniapp预览图片的接口用法，并提醒注意图片链接的正确性。在实际应用中，遇到图片加载问题，可能是由于返回的图片链接格式错误导致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用uniapp 的组件 swiper 组件实现，在swiper组件里面添加swiper-item组件是内容盒子

<view class="page-section-spacing">
	<swiper class="swiper" 
		indicator-dots="true" 
		autoplay="true" 
		interval="3000" 
		duration="500"	>
		<swiper-item v-for="item in list" :key="item.id">
			<image :src="item.url" mode="aspectFill"></image>
		</swiper-item>
	</swiper>
</view>

swiper 的一些常用配置：

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}

注意：

1.组件名称swiper.vue或者Swiper的话，在传递数据的时候有可能图片就不见了。

2.改变图片的大小要用rpx。

3.swiper组件有默认的高度为150px，app中需要改变默认高度。

配合uni的接口点击预览图片：

	const reviewImages = (img) => {
		let imgArr = img.split(',');
		uni.previewImage({
			current: 0,
			urls: imgArr,
			fail: (err) => {
				console.log('报错了');
				console.log(err);
			},
			success: res => {
				console.log('成功')
				console.log(res);
			}
		});
	}

这是直接预览多张，传入图片数组即可

注：遇到一个问题就是图片不能正常显示，走了 success 的回调但是图片一直转圈不显示，但是在外面的 image 标签的图片正常显示

后来发现在网站打开图片链接，是html格式的不是图片格式，后端修改一下返回和格式即可。