jeecgBootUniapp/src/pages/production/index.vue

<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '生产数据',
	},
	}
</route>
<template>
	<PageLayout :navbarShow="false">
		<view class="nav">
			<view class="nav_box">
				<scroll-view direction="horizontal">
					<uni-segmented-control :current="current" :values="items" styleType="string" mode="segmented"
						@clickItem="onClickItem"></uni-segmented-control>
				</scroll-view>
			</view>
		</view>
		<view class="content">

			<view v-if="current === 0">
				<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
					<sssjData></sssjData>
				</scroll-view>
			</view>
			<view v-if="current === 1">
				<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
					<trq-data></trq-data>
					<yy-data></yy-data>
				</scroll-view>
			</view>
		</view>



	</PageLayout>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick,
		watchEffect,
		onUnmounted
	} from 'vue';
	//、、东风风光的
	import trqData from '@/pages-production/ribaoshuju/trqRbsj';
	import yyData from '@/pages-production/ribaoshuju/yyRbsj';
	import sssjData from '@/pages-production/shishishuju/trqSssj';
	const items = ref(['油气实时', '油气历史', '管线运行', '安防监控', '设备运行'])
	const current = ref(0)
	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = (statusHeight + 50) + "px";
	const scrollViewHeight = ref(0); //滚动控件的高度

	const activeColor = ref("#0000ff")
	const inActiveColor = ref("#000000")

	function onClickItem(e) {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}

	onMounted(() => {
		calculateScrollViewHeight();
		// 使用 Uniapp 提供的窗口大小变化监听方法
		uni.onWindowResize(calculateScrollViewHeight);
	});

	onUnmounted(() => {
		// 移除 Uniapp 窗口大小变化监听
		uni.offWindowResize(calculateScrollViewHeight);
	});
	const calculateScrollViewHeight = () => {
		// 获取屏幕的总高度
		const screenHeight = uni.getSystemInfoSync().windowHeight;
		// 创建一个选择器查询对象
		const query = uni.createSelectorQuery();
		// 选择所有需要计算高度的元素
		query
			.select('.nav')
			.boundingClientRect();

		// 执行查询操作
		query.exec((res) => {
			let totalHeight = 0;
			res.forEach((element) => {
				if (element) {
					totalHeight += element.height;
				}
			});
			// 计算 scroll-view 的高度
			scrollViewHeight.value = screenHeight - totalHeight;
		});
	};
</script>

<style lang="scss" scoped>
	.nav {
		width: calc(100%);
		height: v-bind(cusnavbarheight);
		font-size: 24rpx;
		//color: #333333;
		position: fixed;
		z-index: 99;
		background-image: url('@/static/navbg.png');
		background-repeat: no-repeat;
		background-size: 750rpx 458rpx;
	}

	.nav_box {
		font-size: 18;

		position: absolute;
		bottom: 6rpx;
		width: calc(100% - 60rpx);
		left: 30rpx;
		right: 30rpx;
	}

	.content {
		position: absolute;
		top: v-bind(cusnavbarheight);
		width: 100%;
		min-height: calc(100vh - v-bind(cusnavbarheight));
	}
</style>