uni-app中uni-datetime-picker日期选择框组件和uni-data-picker级联选择器在scroll-view中弹出展示被遮挡
uni-app中uni-datetime-picker日期选择框组件和uni-data-picker级联选择器在scroll-view中弹出展示被遮挡
产品分类
uniapp/App
PC开发环境操作系统
Windows
PC开发环境操作系统版本号
Windows10
HBuilderX类型
正式
HBuilderX版本号
4.24
手机系统
iOS
手机系统版本号
iOS 17
手机厂商
苹果
手机机型
iPhone15
页面类型
vue
vue版本
vue2
打包方式
云端
项目创建方式
HBuilderX
示例代码：
<template>
<view class="page container">
<uni-section title="操作栏" type="line">
<button class="mini-btn" type="primary" @click="addHandle" size="mini">
点我
</button>
</uni-section>
<uni-popup
ref="businessPopup"
background-color="#fff"
border-radius="15rpx 15rpx 15rpx 15rpx"
>
<view class="popConfig">
<view class="popConfig-title">{{ title }}</view>
<view class="popConfig-content">
<scroll-view
scroll-y
class="scrollView"
:scroll-into-view="scrollIntoView"
lower-threshold="140"
:scroll-with-animation="true"
@scrolltolower="scrollToView('uploadInvoice')"
>
<uni-forms ref="form" :modelValue="form" label-width="80px">
<uni-forms-item
label="选择时间"
required
name="time"
label-width="100px"
>
<uni-datetime-picker
type="date"
v-model="form.time"
placeholder="请选择时间"
></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item
label="选择项目"
required
name="time"
label-width="100px"
>
<uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>
</uni-forms-item>
<uni-forms-item
label="选择时间"
required
name="time"
label-width="100px"
>
<uni-datetime-picker
type="date"
v-model="form.time"
placeholder="请选择时间"
></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item
label="选择项目"
required
name="time"
label-width="100px"
>
<uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>
</uni-forms-item>
<uni-forms-item
label="选择时间"
required
name="time"
label-width="100px"
>
<uni-datetime-picker
type="date"
v-model="form.time"
placeholder="请选择时间"
></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item
label="选择项目"
required
name="time"
label-width="100px"
>
<uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>
</uni-forms-item>
<uni-forms-item
label="选择时间"
required
name="time"
label-width="100px"
>
<uni-datetime-picker
type="date"
v-model="form.time"
placeholder="请选择时间"
></uni-datetime-picker>
</uni-forms-item>
<uni-forms-item
label="选择项目"
required
name="time"
label-width="100px"
>
<uni-data-picker ref="projectPicker" :localdata="dataInfo" v-model="form.id" popup-title="请选择项目" :map="{text:'label',value:'value'}"></uni-data-picker>
</uni-forms-item>
</uni-forms>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import dataJson from './data.json'
export default {
data() {
return {
// 表单参数
form: {
time: "",
id: "",
},
title: "",
scrollIntoView: "",
dataInfo: dataJson,
};
},
watch: {},
created() {
},
methods: {
addHandle() {
this.title = "新增表单";
this.$refs.businessPopup.open();
},
closeBusinessPopup() {
this.$refs.businessPopup.close();
},
submitForm() {
return true;
},
scrollToView(viewId) {
if (this.scrollIntoView === viewId) {
this.scrollIntoView = "";
} else {
this.scrollIntoView = viewId;
}
},
},
};
</script>
<style lang="scss">
page {
background-color: #fff;
}
.cz_btn {
button {
margin-left: 10rpx;
}
}
.uni-searchbar {
background-color: #fff;
}
.scrollView {
background-color: #fff;
width: 100%;
height: 600rpx;
}
.popConfig {
z-index: 999;
background-color: white;
box-sizing: border-box;
padding: 25rpx;
width: 90vw;
min-height: 600rpx;
border-radius: 15rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.popConfig-title {
width: 100%;
font-size: 35rpx;
display: flex;
justify-content: space-around;
font-weight: 600;
padding: 10rpx 0 20rpx 0;
}
.popConfig-content {
width: 100%;
padding-bottom: 10px;
.popConfig-content-item-check {
border: 4rpx solid #5861d0ff;
background-color: #f7f7fc;
}
.popConfig-content-item-uncheck {
border: 4rpx solid #d9d9d9ff;
background-color: white;
}
.popConfig-content-item {
box-sizing: border-box;
padding: 10rpx 0;
border-radius: 15rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 30rpx;
.radio-content {
width: 100%;
.uni-form-item {
// background-color: red;
width: 100%;
padding: 10rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
view:nth-last-of-type(1) {
align-items: center;
}
.radio-content-picker {
.uni-input {
color: #7e7d96ff;
padding: 0;
background-color: rgba(220, 38, 38, 0);
line-height: 55rpx;
}
}
/deep/.uni-numbox__value[data-v-15947278] {
border: none;
background-color: #edededff;
min-width: 100rpx;
height: 55rpx;
margin: 0 15rpx;
// line-height: 55rpx;
// align-items: center;
}
/deep/.uni-numbox__minus[data-v-15947278],
/deep/.uni-numbox__plus[data-v-15947278] {
border-radius: 40rpx;
border: 2rpx solid #dfe3eb;
height: 55rpx;
background-color: white;
}
}
}
}
}
view {
img {
margin-top: 30rpx;
width: 150rpx;
height: 150rpx;
}
}
.popConfig-txt {
text-align: center;
.popConfig-title {
font-size: 40rpx;
color: #3b385aff;
}
.popConfig-des {
font-size: 35rpx;
color: #3b385aff;
}
}
.popConfig-btn {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
z-index: 9;
button {
width: 35%;
height: 60rpx;
line-height: 60rpx;
background-color: #5861d0ff;
color: white;
border-radius: 40rpx;
}
button:nth-last-child(1) {
background-color: white;
color: #5861d0;
border: 2rpx solid #5861d0;
}
}
}
</style>
数据示例
[
{
"code": "9902",
"label": "北京分公司",
"value": "a4abb16b-0bce-4f5a-8337-c3e8bb1d0d6b",
"children": [
{
"code": "990225",
"label": "北京本部",
"value": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",
"children": [
{
"label": "222222",
"code": "TEST2403jn01",
"orgId": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",
"value": "7da99ce7-5768-4b8f-9026-3907072c5b2c"
},
{
"code": "TEST2403bb01",
"orgId": "66063b9d-28a2-4cbb-ac61-afe353a6e4cf",
"value": "bff749ea-2fc3-440c-a6d9-1911d65461d2",
"label": "aaaaaaaaaaaaaaaaaaa"
}
]
},
{
"code": "990210",
"label": "业务一组",
"value": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"children": [
{
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"code": "TEST2407jn01",
"value": "40de6596-b27f-4e1d-984f-9794b5519057",
"label": "qe"
},
{
"code": "TEST2408jn02",
"value": "5ecfa665-8206-4740-a9eb-c0dd26999f4f",
"label": "41",
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355"
},
{
"label": "1111111",
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"value": "716e3c80-2201-4b41-a990-609feff9af04",
"code": "TEST2404ly01"
},
{
"label": "dsadasd",
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"value": "86fb29d7-a542-4ade-95d3-755c85fca7e4",
"code": "TEST2407hl01"
},
{
"label": "2121",
"orgId": "05ed1a8c-406a-4a10-9ed2-2792a6014355",
"value": "f9611728-4e0e-45dd-a6a7-994f478a565d",
"code": "TEST2407xa01"
}
]
}
]
}
]
操作步骤：
- popup组件中使用scroll-view
- scroll-view设置固定高度
- scroll-view中使用表单组件
- 表单item数量撑满scroll-view的高度，scroll-view可竖向滑动
- 表单组件中使用uni-datetime-picker组件选择日期和级联选择框
- 对于popup和scroll-view样式代码已提供
预期结果：
ios真机中选择日期和安卓真机日期弹窗一样样式
实际结果：
ios真机日期选择组件的日期选择弹窗显示依旧异常
bug描述：
uni-datetime-picker日期选择框组件和uni-data-picker级联选择器在scroll-view中弹出展示被遮挡，scroll-view固定个高度，当forms-item撑不满scroll-view的高度时，展示是没有问题的，但是当forms-item到达一定数量后，把scroll-view固定高度撑满，可以竖向滑动时，uni-datetime-picker日期选择框组件和uni-data-picker级联选择器弹出时展示不全。
项目代码zip已上传
4 回复
在uni-app中，如果你在使用uni-datetime-picker日期选择框组件和uni-data-picker级联选择器组件时，发现它们在scroll-view中弹出展示被遮挡，这通常是由于组件的弹出层（picker的模态框）的z-index值不够高，或者scroll-view的某些样式属性限制了弹出层的显示。
以下是一个可能的解决方案，通过动态调整弹出层的z-index值以及确保scroll-view不会限制弹出层的显示。这里我们主要关注如何通过代码调整z-index值，因为样式属性的调整通常依赖于具体的布局和需求。
解决方案示例
-
调整弹出层的z-index值
你可以通过修改组件的样式，增加弹出层的z-index值，确保其高于其他元素。由于uni-app的组件样式可能通过类选择器或全局样式定义，你需要确保你的样式覆盖生效。
/* 在App.vue或全局样式文件中添加 */ .uni-picker-modal { z-index: 9999 !important; /* 使用!important确保覆盖 */ }注意：
uni-picker-modal是假设的类名，实际使用时需要根据组件的实际类名进行调整。 -
确保scroll-view不会限制弹出层
确保
scroll-view的样式不会影响到弹出层的显示。例如，避免使用overflow: hidden等属性，或者确保弹出层不在scroll-view的直接子元素内。<template> <view class="container"> <scroll-view scroll-y="true" class="scroll-container"> <!-- 其他内容 --> </scroll-view> <!-- 弹出层（假设为日期选择器） --> <uni-datetime-picker v-if="isPickerVisible" @change="onPickerChange" class="custom-picker"></uni-datetime-picker> </view> </template> <style> .scroll-container { height: 100vh; /* 或其他合适的值 */ overflow-y: auto; /* 确保可以滚动 */ } .custom-picker { position: fixed; /* 使用fixed定位确保不被scroll-view限制 */ top: 50%; /* 或其他合适的位置 */ left: 50%; transform: translate(-50%, -50%); z-index: 9999; /* 确保高于scroll-view */ } </style>注意：上述代码中的
.custom-picker样式和定位方式需要根据实际情况调整，特别是如果弹出层是通过组件内部逻辑自动管理的，你可能需要更深入地了解组件的弹出机制。
通过上述方法，你可以尝试解决uni-datetime-picker和uni-data-picker在scroll-view中被遮挡的问题。如果问题依旧存在，建议检查其他可能影响z-index的属性，如position、transform等，或者查阅uni-app官方文档和社区寻求更多帮助。
