记录swiper使用的问题(轮播图使用)

一、第一次使用swiper,难免遇到一些坑,记录一下自己遇到的问题和解决方案
一开始要做的效果是这样的,

在这里插入图片描述
死活找不到两边是怎么弄出来的
后面发现官网提供了一个属性
在这里插入图片描述
默认不设置,只会一次显示一张图片,设置为auto就会根据图片的大小来充满轮播图容器,
然后再设置spaceBetween
在这里插入图片描述同时设置

loopedSlides :3,

参考官网
完美解决

在uni-app中,`<swiper>` 组件是一个常用的轮播组件,它允许你创建一个滑动的轮播图。由于`<swiper>` 组件的子元素默认高度是自适应内容的,如果你需要在轮播图中拿到图片的最大高度并将其设置为`<swiper>` 的高度,你可以通过Vue的数据绑定和生命周期钩子来实现。 以下是一个简单的示例代码: ```html <template> <swiper class="swiper" :style="{ height: maxHeight + 'px' }"> <swiper-item v-for="(item, index) in imageList" :key="index"> <image :src="item.url" class="slide-image" @load="handleImageLoaded"></image> </swiper-item> </swiper> </template> <script> export default { data() { return { imageList: [ // 图片数组,每个元素包含url属性 ], maxHeight: 0 // 用于存储最大图片高度 }; }, methods: { handleImageLoaded(event) { // 当图片加载完成后执行 const imageHeight = event.target.height; // 比较并记录最大高度 if (imageHeight > this.maxHeight) { this.maxHeight = imageHeight; } } }, mounted() { // 组件挂载后执行,此时所有子组件的created钩子已经执行完毕 // 可以在这里获取初始的最大高度 this.setMaxHeight(); }, watch: { // 监听imageList的变化,如果有新的图片被加载,重新获取最大高度 imageList() { this.setMaxHeight(); } }, methods: { setMaxHeight() { let maxHeight = 0; this.imageList.forEach(item => { const image = new Image(); image.onload = () => { if (image.height > maxHeight) { maxHeight = image.height; } // 所有图片加载完毕后更新高度 if (this.imageList.every(img => img._loaded)) { this.maxHeight = maxHeight; } }; image.onerror = () => { // 处理图片加载出错的情况 }; image.src = item.url; item._loaded = false; // 标记图片尚未加载完成 }); } } }; </script> <style> .swiper { width: 100%; } .slide-image { width: 100%; height: auto; /* 默认图片高度自适应 */ } </style> ``` 在上面的代码中,我们使用了`:style` 绑定来动态设置`<swiper>` 的高度,并通过`handleImageLoaded` 方法来监听每张图片的加载完成事件,以此来获取图片的实际高度。当所有图片都加载完成后,我们使用`setMaxHeight` 方法来更新`maxHeight` 的值,从而更新`<swiper>` 的高度。 请注意,由于图片加载是异步的,所以设置最大高度的操作需要确保所有图片都加载完成后再进行。上面的代码示例是一个基本的实现思路,实际情况中可能需要根据具体的业务逻辑进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东哥爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值