uni-app uni-list-item body插槽嵌入uni-datetime-picker无法正常弹出选择框

uni-app uni-list-item body插槽嵌入uni-datetime-picker无法正常弹出选择框

开发环境 版本号 项目创建方式
Mac macOS 12.7.6 HBuilderX

示例代码：

<uni-list>  
    <uni-list-item :clickable="true">  
        <template v-slot:body>  
            <uni-datetime-picker v-model="reservationTimeStart" type="datetime">  
                <view class="li-body">  
                    <text class="li-body__title">计划开始时间</text>  
                    <view style="flex: 1;"></view>  
                    <uni-icons :size="16" color="#03A7F0" type="calendar" />  
                    <view class="li-body__rgt">  
                        <text class="li-body__txt">{{ $returnedValityEmptyStr(reservationTimeStart, '请设置开始时间') }}</text>  
                    </view>  
                    <uni-icons :size="16" class="li-body__rgticon" color="#bbb" type="arrowright" />  
                </view>  
            </uni-datetime-picker>  
        </template>  
    </uni-list-item>  
</uni-list>

操作步骤：

必须是平板，同时uni-list-item中使用body插槽嵌入uni-datetime-picker组件就可复现

预期结果：

正常弹出时间选择组件

实际结果：

未正常弹出时间选择

bug描述：

使用uni-list组件时，需要在uni-list-item中的body插槽嵌入uni-datetime-picker，嵌入后在平板设备上无法正常弹出


更多关于uni-app uni-list-item body插槽嵌入uni-datetime-picker无法正常弹出选择框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

该bug反馈内容较为完整，标题明确描述了问题核心，提供了详细的开发环境信息（HBuilderX 4.45、Vue2、Android 10平板等），代码示例可直接运行，复现步骤清晰（需平板设备+body插槽嵌入方式），预期与实际结果对比明确。分类信息覆盖全面，但缺少错误日志截图和最小可复现项目链接。
经核查知识库，该bug很可能成立：知识库记录显示uni-datetime-picker存在多个移动端弹出层问题（如"确认按钮被tabbar遮盖"、“h5平台报错’cale’ of undefined"等修复记录），且用户使用的HBuilderX 4.45版本低于包含这些修复的版本（当前正式版已更新至更高版本）。特别要注意的是，知识库明确说明当uni-list-item使用插槽时"内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现”，这可能导致平板设备上的布局适配问题。
建议用户：1) 升级HBuilderX至最新正式版（当前版本高于4.45）；2) 检查z-index等样式冲突；3) 尝试添加popup属性改用弹出层模式。相关文档参考uni-list-item插槽说明和uni-datetime-picker组件示例。若仍无法解决，需提供具体错误日志和屏幕截图进一步排查。 内容为 AI 生成，仅供参考

更多关于uni-app uni-list-item body插槽嵌入uni-datetime-picker无法正常弹出选择框的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于 uni-list-item 的点击事件与 uni-datetime-picker 的事件冲突导致的。在平板设备上，uni-list-item 的点击区域会覆盖其内部插槽内容，导致 uni-datetime-picker 无法正常触发弹出事件。

解决方案：

  1. 移除 uni-list-item 的点击事件： 将 :clickable="true" 移除，避免父级元素的点击事件干扰。

  2. 调整 uni-datetime-picker 的触发方式： 将 uni-datetime-picker 的触发区域限制在其内部，避免与 uni-list-item 的交互冲突。

修改后的代码示例：

<uni-list>  
    <uni-list-item> <!-- 移除 clickable 属性 -->  
        <template v-slot:body>  
            <uni-datetime-picker v-model="reservationTimeStart" type="datetime">  
                <view class="li-body" @click.stop> <!-- 阻止事件冒泡 -->  
                    <text class="li-body__title">计划开始时间</text>  
                    <view style="flex: 1;"></view>  
                    <uni-icons :size="16" color="#03A7F0" type="calendar" />  
                    <view class="li-body__rgt">  
                        <text class="li-body__txt">{{ $returnedValityEmptyStr(reservationTimeStart, '请设置开始时间') }}</text>  
                    </view>  
                    <uni-icons :size="16" class="li-body__rgticon" color="#bbb" type="arrowright" />  
                </view>  
            </uni-datetime-picker>  
        </template>  
    </uni-list-item>  
</uni-list>
回到顶部