【uniapp】tabsSwiper组件动态设置swiper的高度

项目场景：

提示：这里简述项目相关背景：

项目场景：使用uni-app和uview中的tabsSwiper实现全屏切换页面。

---

问题描述

1、使用tabsSwiper时，如果固定屏幕高度会存在在不同手机上选项卡页面占比不全。当swiper高了，swiper嵌套的列表能滚动，整个页面也能滚动，导致tab选项卡也能跟着页面滚动。

目标：使其刚好占用屏幕剩余空间。

红色模块为固定高度，绿色为滑动区域

解决方案：

1. 先给顶部需要固定高度的元素整体套一个view，直接计算这个view的高度。
2. 给 swiper 和 scroll-view 赋值动态boxHeight高度。
3. 在data里定义boxHeight
4. 在onReady里动态计算boxHeight高度

<template>
	<view>
		<view ref='top'>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: boxHeight}">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom" :style="{height: boxHeight}">
					...
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '左'
				}, {
					name: '右'
				}],
				current: 0, 
				swiperCurrent: 0, 
				boxHeight: ''
			};
		},
		onReady(){
			uni.getSystemInfo({
		        success: (res) => {
		        	let topHeight = (this.$refs.top.$el.offsetHeight * (750/res.windowWidth));
					let winHeight = (res.windowHeight * (750/res.windowWidth));
					// boxHeight为屏幕高度 - 顶部高度
					this.boxHeight = winHeight - topHeight + 'rpx';
	        	}
		    });
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
			}
		}
	};
</script>

做完以上步骤后，发现此时选项卡实际数据长度若超过手机高度，真机调试无法下滑页面
查到解决“uni-app 的swiper 高度限制导致页面过长无法滚动的问题”的方法。

在style里添加以下代码

/deep/ uni-swiper .uni-swiper-wrapper {
     overflow-y: auto!important;
 }
/deep/ uni-swiper-item {
    overflow-y: auto!important;
 }

后续问题

后续存在：u-tabs-swiper放在父组件内，scroll-view里存放子组件，此时再用this.$refs.top.$el.offsetHeight获取高度，会报undefined is not an object (evaluating '_this.$refs.top.$el错误
如何解决这类问题。