uniapp swiper组件被内容撑开

swiper组件被内容撑开

1.html结构

<swiper :duration="500" :current="current" @change="changeSwiper" :style="[{height:swiperHeight+'px'}]">
	<swiper-item>
		<view class="swiper-item-content"></view>
	</swiper-item>
</swiper>

给swiper绑定一个动态style，并在data中初始化该变量

2.使用uni.createSelectorQuery()动态获取内容高度

getCurrentSwiperHeight(element) {
	let query = uni.createSelectorQuery().in(this);
	query.select(element).boundingClientRect(data => {
	this.swiperHeight = data.height
	}).exec()
},

api详情可以参考uniapp官网
在初始化的时候，由于dom还没有加载，所以第一次获取到高度为0，我们应该在发起请求，获取展示内容区数据之后，再获取dom节点高度

// 假设发请求
setTimeout((res)=>{
	this.list = res.data.list
	this.$nextTick(() => {
		this.getCurrentSwiperHeight('.swiper-item-content')
	})
})