<template>
<view>
<button class="more-popup-botton" type="primary" @click="onOpenSetHeadModal">打开popup</button>
<uni-popup ref="headPopupRef" type="bottom" class="head-popup" background-color="#fff">
<view class="" style="margin: 10px 10px;">
<uni-forms :modelValue="sapHeadInfo" label-width="100">
<uni-forms-item label="日期1">
<uni-datetime-picker type="datetime" v-model="sapHeadInfo.datetimesingle" />
</uni-forms-item>
<uni-forms-item label="日期2">
<uni-datetime-picker type="datetime" v-model="sapHeadInfo.datetimesingle" />
</uni-forms-item>
<uni-forms-item label="文本">
<uni-data-select v-model="sapHeadInfo.headText" :localdata="status"></uni-data-select>
</uni-forms-item>
</uni-forms>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {ref} from 'vue'
const headPopupRef = ref(null);
function onOpenSetHeadModal(){
headPopupRef.value.open();
}
const status = ['苹果','香蕉','糙米']
</script>
1***@qq.com
- 发布：2023-11-17 15:05
- 更新：2023-11-17 15:30
- 阅读：503
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 11
HBuilderX类型： 正式
HBuilderX版本号： 3.97
浏览器平台： Chrome
浏览器版本： 119.0.6045.159
项目创建方式： HBuilderX
示例代码：
操作步骤：
预期结果：
下拉框能够自动向上面显示
下拉框能够自动向上面显示实际结果：
不显示
不显示bug描述：
uni-data-select 在uni-popup中选择下拉列表时，无法显示出来
爱豆豆 - 办法总比困难多
这个不是没显示出来 而是被盖住了
uni-data-select的下拉元素本身就是通过定位来实现的 而且你这选择框还处于页面最底部 刚好被遮盖住了
给popup的字元素增加高度就能看到下面的选择项了
<uni-popup ref="headPopupRef" type="bottom" class="head-popup" background-color="#fff">
<view class="" style="margin: 10px 10px;overflow-y: scroll;height: 40vh;">
<uni-forms :modelValue="sapHeadInfo" label-width="100">
<uni-forms-item label="日期1">
<uni-datetime-picker type="datetime" v-model="sapHeadInfo.datetimesingle" />
</uni-forms-item>
<uni-forms-item label="日期2">
<uni-datetime-picker type="datetime" v-model="sapHeadInfo.datetimesingle" />
</uni-forms-item>
<uni-forms-item label="文本">
<uni-data-select v-model="sapHeadInfo.headText" :localdata="status"></uni-data-select>
</uni-forms-item>
</uni-forms>
</view>
</uni-popup> 不过建议你使用picker组件来实现这个表单项的选择功能
喜欢技术的前端 - QQ---445849201
改一下，可以的
const status = reactive([{
text: "苹果",
value: "10001",
}, {
text: "香蕉",
value: "10002",
}, {
text: "糙米",
value: "10004",
}])