uview 轮播图高度自适应

最新推荐文章于 2024-05-25 09:18:04 发布

qq_25501109

最新推荐文章于 2024-05-25 09:18:04 发布

阅读量638

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_25501109/article/details/137104931

版权

因为uview轮播的高度是number高度，放大后无法自适应

你肯定想说可以这样写啊

:height="swiperHeightOne"

swiperHeightOne: uni.upx2px(426)

但是不行，放大后还是会这样噢，因为最外面控制了最大宽度

最好的处理办法：

<u-swiper class="listBackGSwiper" :height="swiperHeightOne" :list="formData.banner" indicator indicatorMode="dot" circular :interval="5000" img-mode="widthFix"></u-swiper>

swiperHeightOne: uni.upx2px(426)  // 默认值

this.formData.banner = ["b.jpg","c.jpg","a.jpg"]
// 调用方法获取图片的高度
this.getImageList(this.formData.banner).then(res_h=>{
	console.log(res_h)
	const maxNum = Math.max(...res_h)
	this.swiperHeightOne = maxNum
})

//处理图片高度方法  （由于uni.getImageInfo是异步，所以用promise，同时在小程序里面需要配置白名单）
			async getImageList(imageList, w=750) {
				const hieghtList = [],
					getImageInfoSync = (src) => {
						return new Promise((resolve, reject) => {
							uni.getImageInfo({
								src,
								success(r) {
									console.log('长宽',r.width, r.height)
// 获取到最大宽度的div的宽度
									let info = uni.createSelectorQuery().select('.con-center-top').fields({
										size: true
									}, (res) => {
										const hieght = res.width / r.width * r.height
										// 得到最大父级div的宽度 再得到轮播图应该的高度
										resolve(hieght)
									}).exec()
									
								},
	
							})
						})
					}
				for (let item of imageList) {
					const [height] = await getImageInfoSync(item).then(r => [r, null], f => [null, f])
					hieghtList.push(height)
				}
				return Promise.resolve(hieghtList) 
			}