jokerL
jokerL
  • 发布:2024-08-16 13:48
  • 更新:2024-08-16 13:48
  • 阅读:74

安卓13 uniapp 使用uni-easyinput在微信小程序 当页面滑动后,处于下面的输入框弹窗键盘后,光标位置错误

分类:uni-app

问题:如标题
当前页面有很多输入框,当页面往下滑后,再点击输入框弹出键盘后,光标位置偏移过大

截图现象:

代码:

<template>  
    <page-meta page-style="overflow:hidden"></page-meta>  
    <view class="reservationApply">  
        <view class="container">  
            <view class="container-box">  
                <view class="container-box-title">  
                    入园信息  
                </view>  
                <uni-forms err-show-type="toast" ref="form" :modelValue="formData" border label-width="100"  
                    :rules="rules">  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                    <uni-forms-item required label="司机姓名:" name="driverName" class="labelClass">  
                        <uni-easyinput type="text" :inputBorder="false" v-model="formData.driverName" placeholder="请输入"  
                            maxlength="10" />  
                    </uni-forms-item>  
                </uni-forms>  
            </view>  
        </view>  
        <view class="container-btn">  
            <u-button shape="circle" type="primary" text="提交审核"></u-button>  
        </view>  
    </view>  
</template>  

<script>  
    import dayjs from 'dayjs';  
    export default {  
        data() {  
            return {  
                formData: { //申请单表单项  
                    driverName: '', //司机姓名  
                },  
            }  
        },  
        onLoad(opt) {},  
        computed: {},  
        watch: {},  
        methods: {  

        }  
    }  
</script>  

<style scoped lang="scss">  
    .reservationApply {  
        width: 100%;  
        background-color: #f4f4f4;  
        background-size: 100% 100%;  
        overflow-y: auto;  
        height: 100vh;  
        padding-top: 40rpx;  
        position: relative;  
    }  

    .container {  
        width: 100%;  
        height: auto;  
        background-color: #f4f4f4;  
        background-size: 100% 100%;  
        overflow-y: auto;  
        padding: 0 20rpx;  
        position: relative;  

        .container-box {  
            background-color: #ffffff;  
            padding: 32rpx 24rpx;  
            width: 100%;  
            height: auto;  
            overflow-y: auto;  
            box-sizing: border-box;  
            border-radius: 20rpx;  

            ::v-deep .uni-forms-item__label {  
                font-size: 28rpx !important;  
                color: rgba(0, 0, 0, 0.90) !important;  
                text-align: right !important;  
                font-family: Helvetica !important;  
                font-weight: 400 !important;  
            }  

            ::v-deep .uni-easyinput__content-input {  
                font-size: 28rpx !important;  
                color: rgba(0, 0, 0, 0.90) !important;  
                text-align: right !important;  
                font-family: Helvetica !important;  
                letter-spacing: 0 !important;  
                font-weight: 400 !important;  
            }  

            ::v-deep .uni-easyinput__placeholder-class {  
                font-family: Helvetica;  
                font-size: 28rpx;  
                color: rgba(0, 0, 0, 0.40);  
                letter-spacing: 0;  
                font-weight: 400;  
            }  

            ::v-deep .content-clear-icon {  
                padding-right: 0 !important;  
                margin-top: 8rpx;  
            }  

            ::v-deep .uni-forms-item__error {  
                text-align: right;  
            }  

            .container-box-title {  
                height: 50rpx;  
                font-family: PingFangSC-Regular;  
                font-size: 36rpx;  
                color: rgba(0, 0, 0, 0.90);  
                font-weight: 400;  
                margin-bottom: 24rpx;  
            }  

        }  

    }  

    .container-btn {  
        background-color: #ffffff;  
        height: 188rpx;  
        display: flex;  
        align-items: center;  
        margin-top: 48rpx;  
        padding: 84rpx;  
    }  
</style>
2024-08-16 13:48 负责人:无 分享
已邀请:

要回复问题请先登录注册