uni-app是目前开发中常见的多端框架之一，在大多数网站中轮播效果都是必不可少的一个重要功能。通过轮播效果尽可能的将资源更加充分的利用，那么对于轮播区域展示的图文则需要对应处理。

本篇文章介绍基于uni-app框架实现swiper中图片宽度、高度的自适应两种处理方式。

方式一：使用load监听图片加载完成后获取图片宽高

<template>
	<view>
		<swiper :indicator-dots="true" indicator-active-color="#fff" :indicator-color="`rgba(255,255,255,.5)`" class="swiper-box" :autoplay="true" interval="3000" :circular="true" :acceleration="true" v-bind:style="{ height: imgheights[current] + 'rpx' }">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view  class="swiper-item">
					<image class="swiper_image" v-bind:style="{ height: imgheights[index] + 'rpx' }" :src="item.image" :data-id='index' mode="widthFix" @load='imageLoad' />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		name:"activityList",
		props:{
			list:{
				type:Array
			}
		},
		data() {
			return {
				current: 0,
				mode: 'round',
				imgheights: []
			};
		},
		methods:{
			imageLoad: function(e) { //获取图片真实宽度
				var imgwidth = e.detail.width,
					imgheight = e.detail.height,
					//宽高比  
					ratio = imgwidth / imgheight;
				//计算的高度值  
				var viewHeight = 750 / ratio;
				var imgheight = viewHeight;
				//把每一张图片的对应的高度记录到数组里  
				this.imgheights[e.target.dataset.id] = parseInt(imgheight);
				this.$forceUpdate()
			}
		}
		
	}
</script>
<style lang="scss" scoped>
	.swiper-box{
		width: 100%;
	}
	.swiper_image{
		width: 100%;
		border-radius: 20upx;
	}
</style>

方式二：query.select获取指定元素宽高

<template>
	<view class="detais">
		<swiper class="swiper"
			:current="swiperIndex"
			@change="changeSwiper"
			:style="{ height: swiperHeight + 'px' }" circular :autoplay="true" >
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<image :id="'wrap' + index" class="swiper-img" :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				swiperIndex: 0, // 当前索引
				swiperHeight: 0, // 滑块的高度(单位px)
				bannerList:[]
			}
		},
		onLoad(e) {
			this.$nextTick(() => {
				this.setSwiperHeight(); // 动态设置 swiper 的高度
			});
		},
		methods: {
			changeSwiper(e) {
			  this.swiperIndex = e.detail.current;
			  this.$nextTick(() => {
			    this.setSwiperHeight(); // 动态设置 swiper 的高度
			  });
			},
			/* 动态设置 swiper 的高度 */
			setSwiperHeight() {
				const element = "#wrap" + this.swiperIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				  query.exec(res => {
					if (res && res[0]) this.swiperHeight = res[0].height;
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.swiper-img{
		width: 100%;
	}
</style>

以上两种方式都能实现图片高度的自适应的处理，个人比较推荐方式一。