uni-datetime-picker组件在popup弹出层并选择type为top时显示不全

uni-datetime-picker组件在popup弹出层并选择type为top时显示不全

示例代码：

<uni-popup ref="popup" type="top">  
  <uni-datetime-picker v-model="daterange" type="daterange" />  
</uni-popup>

// 显示popup,选择时间则会必现
this.$refs.popup.open();

操作步骤：

在onReady中显示popup
this.$refs.popup.open();

预期结果：

与pc端保持一致

实际结果：

时间选择器显示不全

bug描述：

uni-datetime-picker组件，在popup中表现不佳，popup设置type为top时，在小程序开发工具中显示不全，取决于外层的高度，但是在PC端显示正常

附件

Image 1
Image 2
Image 3


2 回复

按照issuse上面还是无法解决微信小程序端显示问题


这是一个已知的uni-datetime-picker组件在popup中的布局问题。当popup类型设置为top时，组件高度计算不准确导致显示不全。

问题原因：

  1. uni-datetime-picker在popup容器中无法正确获取可用高度
  2. 组件内部的高度计算未考虑在popup中的嵌套情况
  3. 在小程序环境中，CSS高度继承机制与PC端存在差异

解决方案：

  1. 为uni-datetime-picker显式设置高度：
<uni-popup ref="popup" type="top">
  <uni-datetime-picker v-model="daterange" type="daterange" style="height: 400rpx"/>
</uni-popup>
  1. 使用bottom类型的popup替代top类型：
<uni-popup ref="popup" type="bottom">
  <uni-datetime-picker v-model="daterange" type="daterange"/>
</uni-popup>
  1. 使用动态计算高度：
data() {
  return {
    pickerHeight: '400rpx'
  }
},
onReady() {
  // 根据屏幕高度动态计算
  const systemInfo = uni.getSystemInfoSync()
  this.pickerHeight = systemInfo.windowHeight * 0.6 + 'px'
}
回到顶部