3***@qq.com
3***@qq.com
  • 发布:2019-10-18 18:03
  • 更新:2019-10-18 18:03
  • 阅读:841

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

分类:uni-app

详细问题描述

当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

2019-10-18 18:03 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复