uniapp 之 动态获取swiper 的高度

场景：
  swiper 组件，swiper 需要设置高度，不能设置同样高度，有的swiper-item的高度可能不需要那么高，有的又需要那么高，所以不同swiper-item内容不同，需要渲染出来的高度不同；

<swiper class="swiper" :style="{ height: `${swiperHeight}px` }" circular :current="tabItem" @change="changeTab">
	<swiper-item>
		<view class="tab-swiper-item">
			<!-- 内容1 -->
		</view>
	</swiper-item>
	<swiper-item>
		<view class="tab-swiper-item">
			<!-- 内容2 -->
		</view>
	</swiper-item>
</swiper>

data() {
    
    
	return {
    
    
		tabItem: 0,
		swiperHeight: 0,
	}
}

// 动态获取swiper的高度
setSwiperHeight() {
    
    
	this.$nextTick(() => {
    
    
		let element = '.tab-swiper-item'
		// 通过uni api 获取对应dom节点内容的高度，然后赋值给swiper
		let query = uni.createSelectorQuery().in(this)
		// 多个的话使用selectAll，在回调函数里面获取当前的swiper下标的高度赋值给swiper
		query.selectAll(element).boundingClientRect()
		query.exec((res) => {
    
    
			if (res && res[0]) {
    
    
				// tabItem swiper 的下标
				this.swiperHeight = res[0][this.tabItem].height
			}
		})
	})
}

说明

• createSelectorQuery
• swiper

亲测有效