uniapp出现下拉框等组件被遮挡的分析

1. 问题所示

下拉框被遮挡的问题：

uni-collapse-item组件无法下拉的问题：

2. 代码复现

博主的代码精简如下：

html 复制代码

<template>
	<view>
		<uni-forms v-model="ArchiveVO">
			<uni-collapse style="overflow: visible;">			
				<uni-collapse-item title="桥吊情况" :open="false">
					<view class="collapse-item-content">
						<uni-forms-item label="船上桥吊数量">
							<uni-easyinput v-model="ArchiveVO.onboardCrane"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="船吊位置在最边上的位置需要">
							<uni-easyinput v-model="ArchiveVO.onboardCranePosition"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="船吊是否影响开板">
							<uni-data-select
								v-model="ArchiveVO.craneOpeningEffect"
								:localdata="getDictCacheByCode('is_ship_data_valid')"
							></uni-data-select>
						</uni-forms-item>
					</view>
				</uni-collapse-item>
				
				<uni-collapse-item title="加固要求" :open="false">
					<view class="collapse-item-content">
						<uni-forms-item label="加固要求">
							<uni-easyinput v-model="ArchiveVO.reinforcementRequirements"></uni-easyinput>
						</uni-forms-item>
					</view>
				</uni-collapse-item>
				
				<!-- is_ship_data_valid -->
			</uni-collapse>
		</uni-forms>
		<view class='submitBtnView'>
			<button type="primary" style="width: 80%;" @click="submit">提交</button>
		</view>
	</view>
</template>

<style>
/* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100vh; /* 增加视口高度 */
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */
.collapse-item-content{
	width: 90%;
	margin-left: 5%;
	display: block;
	overflow: visible;

}
.submitBtnView{
	position: fixed; /* 固定在屏幕上 */
	bottom: 0; /* 距离底部为0像素 */
	left: 0; /* 左边界与视口左侧对齐 */
	width: 100%; /* 宽度等于视口宽度 */
	padding: 10px; /* 添加内边距（如果需要）*/
	background-color: #fff;
	z-index: 99999; /* 确保按钮在下层 */
}
</style>

3. 解决方法

3.1 下拉框被遮挡

可能涉及 uni-collapse-item 的内容布局方式和下拉框的定位冲突

由于 uni-collapse-item 内的内容可能受限于父级容器的 overflow 设置，下拉框无法超出父级容器的边界显示

这种情况只能增加底部空间

css中的last-child语法

css 复制代码

:last-child {
  margin-bottom: 100px; /* 视情况增加足够的底部空间 */
}

或者直接在单个组件上：

html 复制代码

<uni-forms-item label="风险等级">
	<uni-data-select
		v-model="ArchiveVO.riskLevel"
		:localdata="getDictCacheByCode('ship_risk_level')"
		style="margin-bottom: 100px"
	></uni-data-select>
</uni-forms-item>

后续我发现这种情况是不适用：（以下方式对我都不适用，诸位可尝试下）

确保z-index值适当：可以通过CSS设置下拉框的z-index值，确保它高于页面上其他元素的层级，从而避免被遮挡。例如，可以给下拉框设置一个较高的z-index值
使用overflow属性：在父容器上设置overflow: visible;，以确保子元素的下拉部分可以显示在父容器之外

css 复制代码

.collapse-item-content {
  position: relative; /* Ensure positioning context */
}

.dropdown {
  position: relative; /* Or absolute */
  z-index: 1000; /* Adjust as needed */
}

3.2 uni-collapse-item 无法下拉的问题

由于页面布局高度未能自适应，或者是由固定在底部的按钮遮挡了内容

可以尝试以下方式进行优化：

方案一：为最外层的 uni-collapse 或页面增加内边距，避免内容被底部按钮遮挡：

css 复制代码

.uni-collapse {
  padding-bottom: 100px; /* 确保最下面的collapse item有足够空间展开 */
}

方案二：取消按钮的固定位置

如果底部按钮的固定位置导致了内容的遮挡，可以考虑将按钮的定位方式改为非固定，并确保页面高度能够包含所有内容：

css 复制代码

.submitBtnView {
  position: relative; /* 改为相对定位，避免遮挡内容 */
  bottom: 0;
}

截图如下：

uniapp出现 下拉框等组件被遮挡 的分析

目录

1. 问题所示

2. 代码复现

3. 解决方法

3.1 下拉框被遮挡

3.2 uni-collapse-item 无法下拉的问题

uniapp出现下拉框等组件被遮挡的分析