uni-app uni-popup弹出层scroll-view固定高度内表单日期时间组件点击选择时间后,安卓和微信开发者工具正常,苹果手机日期组件被遮挡显示不全

uni-app uni-popup弹出层scroll-view固定高度内表单日期时间组件点击选择时间后,安卓和微信开发者工具正常,苹果手机日期组件被遮挡显示不全

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

产品分类:uniapp/小程序/微信

PC开发环境操作系统:Mac

HBuilderX类型:正式

HBuilderX版本号:4.24

第三方开发者工具版本号:当前已是最新版本(1.06.2407110 darwin-arm64)

基础库版本号:3.5.3

项目创建方式:HBuilderX


示例代码:

<!-- 添加或修改机器保养对话框 -->  
<uni-popup ref="popup" type="center" :title="title" :visible.sync="open">  
  <view class="bg-white padding">  
    <uni-forms ref="form" :modelValue="form" :rules="rules" label-width="80px">  
      <scroll-view scroll-y="scroll-y" :style="'height:'+ height +'px'">  
        <uni-forms-item label="保养状态" name="status" :required="true">  
          <uni-data-select :localdata="dict.type.machine_maintenance" @change="change"  
                           v-model="form.status" placeholder="请选择保养状态">  

          </uni-data-select>  
        </uni-forms-item>  
        <uni-forms-item label="保养时间" name="maintenanceTime" :required="false">  
          <uni-datetime-picker clearable  
                               v-model="form.maintenanceTime"  
                               type="datetime"  
                               value-format="yyyy-MM-dd HH:mm:ss"  
                               @change="change"  
                               placeholder="请选择保养时间">  
          </uni-datetime-picker>  
          <!--
          <view class="cu-form-group">  
            <picker mode="date" :value="form.maintenanceTime" @change="change">  
              <view class="">  
                {{ form.maintenanceTime }}  
              </view>  
            </picker>  
          </view>
          -->  
        </uni-forms-item>  
        <uni-forms-item label="保养前图片" name="maintenancePicBefore" :required="false">  
          <image-upload v-model="form.maintenancePicBefore"/>  
        </uni-forms-item>  
        <uni-forms-item label="保养后图片" name="maintenancePicAfter" :required="false">  
          <image-upload v-model="form.maintenancePicAfter"/>  
        </uni-forms-item>  
        <!--
        <uni-forms-item label="保养人" name="maintenancePeople" :required="false">  
          <uni-easyinput v-model="form.maintenancePeople" placeholder="请输入保养人"/>  
        </uni-forms-item>
        -->  
        <uni-forms-item label="保养内容" name="maintenanceContent" :required="true">  
          <uni-easyinput v-model="form.maintenanceContent" type="textarea" placeholder="请输入内容"/>  
        </uni-forms-item>  
        <uni-forms-item label="备注" name="remark" :required="false">  
          <uni-easyinput v-model="form.remark" type="textarea" placeholder="请输入内容"/>  
        </uni-forms-item>  
      </scroll-view>  
    </uni-forms>  

    <view slot="footer" class="dialog-footer">  
      <button class="cu-btn block bg-green round shadow " :loading="buttonLoading" @click="submitForm">确 定  
      </button>  
      <button class="cu-btn block  bg-gray round shadow mt10" @click="cancel">取 消</button>  
    </view>  
  </view>  
</uni-popup>  

onLoad(options) {  
  if (options.mch) {  
    this.mch = JSON.parse(options.mch)  
    this.queryParams.machineId = this.mch.machineId  
  }  
  //获取屏幕可用高度  
  let screenHeight = wx.getSystemInfoSync().windowHeight;  
  this.height = screenHeight - 200;  
  this.getList();  
},  

更多关于uni-app uni-popup弹出层scroll-view固定高度内表单日期时间组件点击选择时间后,安卓和微信开发者工具正常,苹果手机日期组件被遮挡显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部