uniapp出现 下拉框等组件被遮挡 的分析
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-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 设置，下拉框无法超出父级容器的边界显示
这种情况只能增加底部空间
:last-child {
margin-bottom: 100px; /* 视情况增加足够的底部空间 */
}
或者直接在单个组件上：
<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;，以确保子元素的下拉部分可以显示在父容器之外
.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;
}
截图如下：
原文地址：https://blog.csdn.net/weixin_47872288/article/details/142066639
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！