小白总结写代码遇到问题怎么办（uniapp自定义导航被滚动内容覆盖）附动图

案例

被自己蠢哭了，先看出现的问题：

顶部导航，滑动到最后导航被覆盖了？

到这里，本人先总结了一个很有用的道理：

写代码遇到问题很正常，但遇到问题该怎么解决呢，最重要的是分析问题，能够找到问题出在哪里，有报错找报错，没有报错找具体出问题的地方以及代码部分，很重要！

分析问题

因为没有报错，来分析出现的问题及写的代码

问题代码如下：

<template>
	<view class="container">
		<view class="tabs-container">
			<view v-for="(tab, index) in tabList" :key="index" @tap="tabsOn(index)"
				:class="{ active: tabsId === index }" class="tab">{{ tab.title }}</view>
		</view>
		<swiper @change="slideOn" :current="tabsId">
			<swiper-item v-for="(tab, index) in tabList" :key="index">
				<find></find>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 导入页面组件
	import find from "../../pages/community/find.vue"

	const tabList = [{
			title: "关注",
			index: "0"
		},
		{
			title: "推荐",
			index: "1"
		}
	];

	const tabsId = ref(0);

	const slideOn = (e) => {
		tabsId.value = e.detail.current;
	};

	const tabsOn = (index) => {
		tabsId.value = index;
	};
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		width: 100%;

		.tabs-container {
			position: fixed;
			left: 0;
			/* 添加足够的高度来确保导航栏不会被内容遮挡 */
			height: 50px;
			width: 100%;
			display: flex;
			justify-content: space-around;

			.tab {
				padding: 20px;
			}

			.active {
				color: #7e9de2;
			}
		}

		swiper {
			height: calc(100vh - var(--status-bar-height) - 50px);
			/* 调整高度以适应导航 */
			padding-top: calc(var(--status-bar-height) + 50px);
			/* 调整 margin 以向下推 swiper 内容 */
		}
	}
</style>

组件页面内容没有展示，我用的<scroll-view>标签来包裹内容，并设置好了高度，组件页面的内容滚动一切正常，直到滑到底部时，覆盖了导航，这说明超出了设定的容器高度，可以确定，组件页面内容是没有问题的，是主页面高度的问题

我把组件页面暂时注释，问题看的更清楚：

看最右侧的滚动条，正常应该不出现滚动条，这说明我们自定义的导航超出了容器高度

解决问题

问题分析完毕，我们将之前的容器高度height:100vh;改成height: calc(100vh - 50px);  (50px是我们定义导航栏的高度)，问题解决。

效果如下：

最后

自己总结的时候才发现问题是多么的简单，但是最初的时候绕了一圈，查百度问gpt，一顿乱搜，考虑监听页面高度的变化方法，禁止原始页面滚动方法，以及是不是触摸穿透问题等等，，静下心来，不要把问题复杂化，往往问题没有想象那么复杂。

需要代码可直接复制，把高度改一下就好~