目录
- 1. 问题所示
- 2. 代码复现
- 3. 解决方法
- 3.1 下拉框被遮挡
- 3.2 uni-collapse-item 无法下拉的问题
1. 问题所示
下拉框被遮挡的问题：
uni-collapse-item组件无法下拉的问题：
2. 代码复现
博主的代码精简如下：
<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-selectv-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语法
:last-child {margin-bottom: 100px; /* 视情况增加足够的底部空间 */
}
或者直接在单个组件上：
<uni-forms-item label="风险等级"><uni-data-selectv-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;，以确保子元素的下拉部分可以显示在父容器之外
.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 或页面增加内边距，避免内容被底部按钮遮挡：
.uni-collapse {padding-bottom: 100px; /* 确保最下面的collapse item有足够空间展开 */
}
方案二：取消按钮的固定位置
如果底部按钮的固定位置导致了内容的遮挡，可以考虑将按钮的定位方式改为非固定，并确保页面高度能够包含所有内容：
.submitBtnView {position: relative; /* 改为相对定位，避免遮挡内容 */bottom: 0;
}
截图如下：
