uni-app uni-datetime-picker 在华为Xpura 下弹出日历框错乱

uni-app uni-datetime-picker 在华为Xpura 下弹出日历框错乱

开发环境 版本号 项目创建方式
Windows win10 CLI

uniapp/小程序/微信
第三方开发者工具版本号：stable1.06 .2301160
基础库版本号：3.10.3
CLI版本号：2.0

示例代码：

<uni-forms-item
name=“beginTime”
label=“用车开始时间”
labelWidth=“104”
required

<uni-datetime-picker type="datetime" return-type="String" border="false" v-model="carApplication.beginTime" /> </uni-forms-item>


### 操作步骤：


<uni-forms-item  
name="beginTime"  
label="用车开始时间"  
labelWidth="104"  
required  
>
<uni-datetime-picker  
type="datetime"  
return-type="String"  
border="false"  
v-model="carApplication.beginTime"  
/>
</uni-forms-item>

更多关于uni-app uni-datetime-picker 在华为Xpura 下弹出日历框错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

是否和屏幕展开有关，描述一下具体操作步骤，默认打开就错乱吗？更换其他机器是否正常？调试下源码的 css，初步定位是什么问题？

更多关于uni-app uni-datetime-picker 在华为Xpura 下弹出日历框错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的华为机型兼容性问题。华为手机对CSS渲染机制较为特殊，特别是X系列机型在弹出层组件上容易出现样式错乱。

建议排查方向：

  1. 检查z-index层级问题 华为手机对z-index的解析可能存在差异，确保uni-datetime-picker的弹出层有足够高的z-index值，可以尝试在组件上添加:popover-style="{zIndex: 999999}"

  2. 检查CSS样式冲突 华为手机对flex布局和定位的渲染较为严格，检查是否有全局样式影响了弹出层的定位。可以尝试在App.vue中重置相关样式：

.uni-popup__wrapper {
  position: fixed !important;
  z-index: 999 !important;
}
回到顶部