1***@qq.com
1***@qq.com
  • 发布:2023-11-17 15:05
  • 更新:2023-11-17 15:30
  • 阅读:524

【报Bug】uni-data-select 在uni-popup中选择下拉列表时,无法显示出来

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 11

HBuilderX类型: 正式

HBuilderX版本号: 3.97

浏览器平台: Chrome

浏览器版本: 119.0.6045.159

项目创建方式: HBuilderX

示例代码:
<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>

操作步骤:

预期结果:
下拉框能够自动向上面显示

实际结果:
不显示

bug描述:

uni-data-select 在uni-popup中选择下拉列表时,无法显示出来

2023-11-17 15:05 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

这个不是没显示出来 而是被盖住了
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",  
    }])

要回复问题请先登录注册