ios 端微信小程序内 uni-app uni-datetime-picker 显示不全

ios 端微信小程序内 uni-app uni-datetime-picker 显示不全

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 第三方开发者工具版本号 基础库版本号 项目创建方式
uniapp/小程序/微信 Windows 22621.2428 正式 3.8.12 1.06.2308310win32-x64 3.0.1 HBuilderX

产品分类：uniapp/小程序/微信
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：22621.2428
HBuilderX类型：正式
HBuilderX版本号：3.8.12
第三方开发者工具版本号：1.06.2308310win32-x64
基础库版本号：3.0.1
项目创建方式：HBuilderX

示例代码：

<u-form-item  
  label="入院时间"  
  prop="patientIpAgain.ipDate"  
  :required="true"  
>
  <uni-datetime-picker  
    type="date"  
    :value="patientIpAgain.ipDate"  
    start="1970-1-1"  
    end="2121-1-1"  
    :border="false"  
    @change="ipDateConfirm"  
  >
    <view  
      v-if="!patientIpAgain.ipDate"  
      style="  
        display: flex;  
        justify-content: flex-end;  
        color: #c0c4cc;  
        font-size: 15px;  
      "
    >
      请选择  
      <u-icon name="arrow-right"></u-icon>  
    </view>
    <view  
      v-else  
      style="  
        display: flex;  
        justify-content: flex-end;  
        color: #303133;  
        font-size: 15px;  
      "  
    >
      {{ patientIpAgain.ipDate }}  
      <u-icon name="arrow-right"></u-icon>  
    </view>
  </uni-datetime-picker>
</u-form-item>

操作步骤：

<u-form-item  
  label="入院时间"  
  prop="patientIpAgain.ipDate"  
  :required="true"  
>
  <uni-datetime-picker  
    type="date"  
    :value="patientIpAgain.ipDate"  
    start="1970-1-1"  
    end="2121-1-1"  
    :border="false"  
    @change="ipDateConfirm"  
  >
    <view  
      v-if="!patientIpAgain.ipDate"  
      style="  
        display: flex;  
        justify-content: flex-end;  
        color: #c0c4cc;  
        font-size: 15px;  
      "
    >
      请选择  
      <u-icon name="arrow-right"></u-icon>  
    </view>
    <view  
      v-else  
      style="  
        display: flex;  
        justify-content: flex-end;  
        color: #303133;  
        font-size: 15px;  
      "  
    >
      {{ patientIpAgain.ipDate }}  
      <u-icon name="arrow-right"></u-icon>  
    </view>
  </uni-datetime-picker>
</u-form-item>

更多关于ios 端微信小程序内 uni-app uni-datetime-picker 显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于ios 端微信小程序内 uni-app uni-datetime-picker 显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的iOS端微信小程序样式兼容性问题。uni-datetime-picker在iOS微信小程序环境中可能会因为样式计算问题导致显示不全。

解决方法：

  1. 给picker容器添加固定高度样式：
.uni-datetime-picker {
  height: 40px; /* 根据实际需求调整 */
}
  1. 或者使用flex布局确保容器正确伸展：
.u-form-item__body {
  display: flex;
  align-items: center;
}
  1. 也可以尝试给picker添加明确的宽度：
.uni-datetime-picker {
  width: 100%;
}
回到顶部