在这里插入图片描述
上边图片是本人要实现的大致布局,其中使用了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元素的高度

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐