uniapp使用swiper，动态设置内容高度

上边图片是本人要实现的大致布局，其中使用了uniapp的swiper，自定义的tabbar，以及自定义的tabs
由于swiperContent部分的高度是动态的，有时候会超过屏幕视口的高度，有时候又小于屏幕视口的高度，所以在这里实现了一套自定义的动态设置swiperContent高度的方法，以下是代码部分

methods: {
   setSwiperHeight(current = 0) {
 		// swiper里边组件的高度
    	let itemsHeight = 0
    	// 当前屏幕总高度
    	let totalheight = uni.getSystemInfoSync().windowHeight
    	// 自定义的头部组件高度
    	let topHeight = 0
    	// 自定义tabs组件高度
    	let tabHeight = 0
    	// tabbar高度
    	let barHeight = uni.upx2px(96)
    	this.$nextTick(() => {
    		uni.createSelectorQuery()
    			.in(this)
    			.selectAll('.swiper-content')
    			.boundingClientRect()
    			.exec(res => {
    				itemsHeight = res[0][current].height
    				uni.createSelectorQuery().in(this).select(".tabs").boundingClientRect(data => {
    					tabHeight = data.height
    					// 获取头部高度
    					uni.createSelectorQuery().in(this).select(".header").boundingClientRect(data => {
    						topHeight = data.height
    						// 计算屏幕中留给swiper组件展示的剩余高度
    						let surplusHeight = totalheight - topHeight - tabHeight - barHeight
    						// 如果swiper当中的组件高度小于当前屏幕剩余高度，使用剩余高度，相反使用swiper当中的组件高度
    						if (itemsHeight < surplusHeight) {
    							this.swiperItemHeight = surplusHeight
    						} else {
    							this.swiperItemHeight = itemsHeight
    						}
    					}).exec()
    				}).exec()
    			})
    	})
    }
}

补充说明：
setSwiperHeight(current = 0)，这里的current设置的是当前自定义tabs默认打开的是第一个窗口
current存在的意义是在我使用tabs进行页面切换的时候再次调用setSwiperHeight()并把当前tabs的index传进去，以重新设置swiper内容的高度

上边的方法中通过 uni.createSelectorQuery().in(this).select(“”) 方法获取dom元素，由于这个方法是异步方法，所以我将一步步的计算放在了这个方法的回调当中，如果不这么写的话，会无法实时获取到dom元素的高度