【报Bug】软键盘将背景挤变形

详细问题描述

当input直接切换时，背景被软键盘上推挤变形

[内容]

重现步骤

两个input，整个page给背景图，从一个input直接切换至另外一个input（注意：不是关闭键盘再切换，而是直接切换--不关闭键盘直接点）

IDE运行环境说明

HBuilderX 2.3.3 正式版本

[手机型号]
小米9

<template>  
    <view class="content">  
        <image src="/static/logo.png" class="logo"></image>  

        <form @submit="goLogin" class="form-box">  
            <view class="username">  
                <image src="/static/user-icon.png" class="icon"></image>  
                <input type="number" v-model="mobile" placeholder="输入手机号" placeholder-style="font-size: 30rpx; color: #a5a5a5;" />  
            </view>  
            <view class="password" v-if="loginType == 'account'">  
                <image src="/static/pass-icon.png" class="icon"></image>  
                <input type="text" v-model="password" :password="!isShow" placeholder="输入密码" placeholder-style="font-size: 30rpx; color: #a5a5a5;" />  
                <image src="/static/hidePass.png" v-if="!isShow" class="icon" @tap.stop="onTapShow"></image>  
                <image src="/static/showPass.png" v-if="isShow" class="icon" @tap.stop="onTapShow"></image>  
            </view>  
            <view class="verify" style="position: relative;" v-if="loginType == 'mobile'">  
                <image src="/static/verify-icon.png" class="icon"></image>  
                <input type="number" v-model="verify_code" placeholder="输入验证码" placeholder-style="font-size: 30rpx; color: #a5a5a5;" />  
                <view style="font-size: 24rpx; margin-top: 10rpx; color: #666666; position: absolute; top: 0rpx; right: 0rpx; line-height: 50rpx; z-index: 999; background: #FFFFFF; padding: 5rpx 20rpx; border-radius: 40rpx;" @tap.stop="sendVerify">{{verify_text}}</view>  
            </view>  
            <view style="text-align: center; font-size: 30rpx;" v-if="loginType == 'mobile'">账户密码登录</view>  
            <button form-type="submit" v-if="loginType == 'mobile'" class="btn-login" style="margin-top: 30rpx;">登录</button>  
            <button form-type="submit" v-if="loginType == 'account'" class="btn-login">登录</button>  
        </form>  
        <view class="quick-login">  
            <view @tap.stop="switchLogin">手机快捷登录</view>  
            <view @tap.stop="goForget">忘记密码?</view>  
        </view>  

        <view class="sdk-login">  
            <view>微信登录</view>  
            <image src="/static/wx_login.png" style="width: 128rpx; height: 128rpx; padding-top: 40rpx;"></image>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                mobile: '',  
                password: '',  
                isShow: false,  
                loginType: 'account',  

                disabled: false,  
                timer: null,  
                verify_code: '',  
                verify_text: '获取验证码'  
            }  
        },  
        onNavigationBarButtonTap: function(e){  
            uni.navigateTo({  
                url: '/pages/account/register/register'  
            })  
        },  
        methods: {  
            goForget: function(){  
                uni.navigateTo({  
                    url: '/pages/account/forget/forget'  
                })  
            },  
            onTapShow: function(){  
                this.isShow = !this.isShow  
            },  
            goLogin: function() {  
                let _this = this;  

                if (_this.mobile.length < 1) {  
                    _this.showError('手机号不能为空');  
                    return false;  
                }  
                let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;  
                if (!reg.test(_this.mobile)) {  
                    _this.showError('手机号不符合要求');  
                    return false;  
                }  
                if (_this.password.length < 1) {  
                    _this.showError('密码不能为空');  
                    return false;  
                }  

                _this._post_form('user/login', {  
                    uniType: 'h5',  
                    mobile: _this.mobile,  
                    password: _this.password  
                },function(result){  
                    // 记录token user_id  
                    uni.setStorageSync('token', result.data.token);  
                    uni.setStorageSync('user_id', result.data.user_id);  
                    // 跳转回原页面  
                    uni.switchTab({  
                        url: '/pages/index/index'  
                    });  
                }, false, function() {  
                    uni.hideLoading();  
                });   
            },  
            switchLogin: function() {  
                if(this.loginType == 'account') {  
                    this.loginType = 'mobile'  
                }else{  
                    this.loginType = 'account';  
                }  
            }  

        }  
    }  
</script>  

<style>  
    page{  
        background: url("~@/static/bg.jpg");  
        background-size:100% 100%;  
        background-repeat:no-repeat;  
        width: 100%;  
        height: 100vh;  
    }  
    .content{border-top: 1rpx solid #eeeeee;}  
    .logo{width: 375rpx; height: 136rpx; padding: 120rpx 187rpx 60rpx 187rpx;}  
    .username, .password, .verify, .quick-login{margin: 30rpx 80rpx; padding: 20rpx 0rpx; border-bottom: 1rpx solid #d9d9d9; display: flex;}  
    .username .icon, .password .icon, .verify .icon{width: 44rpx; height: 44rpx; padding-right: 20rpx;}  
    .username input, .password input, .verify input{font-size: 30rpx; width: 100%;}  
    .btn-login{background: linear-gradient(to right, #a37963 0%,#bd937d 80%); color: #FFFFFF; margin: 60rpx 80rpx 0rpx 80rpx; border-radius: 60rpx;}  
    .quick-login{color: #666666; font-size: 30rpx; border:none; padding: 0rpx; margin: 20rpx 80rpx; flex-direction:row; justify-content:space-between;}  
    .sdk-login{color: #333333; margin: 150rpx 80rpx 0rpx 80rpx; text-align: center;}  
</style>  

联系方式

QQ：324834500