uni-app底部按钮fixed定位后被软键盘推起的解决办法

• 问题引出
• 解决方案
• • 解决思路
  • 代码实现
  • 效果

问题引出

昨天在测试app的时候，测试提出新增个人信息界面底部的input框在输入的时候会被软键盘遮挡而看不到正在输入的内容，如下图

可以看到在发证机关聚焦的时候被软键盘遮挡了，前面说了我们的app是uni-app发布成H5嵌套在android原生壳子里的webview中的，解决这个办法就要从android壳子入手了，所以有了下面的解决方案

# 在webview所在的activity的onCreate()方法中加入下面的代码
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE|WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

现在再来看效果

到这里是不是觉得皆大欢喜了?那么你就太年轻了，骚年！我们退出app，进入到登录界面重新登录，看到下图是不是突然间就傻眼了

联系客服区域竟然被软件盘顶了上去，我们看下联系客服的html代码(无关代码没有贴出)

<template>
	<view class="footKf">
		<view class="kfBtn gui-flex gui-justify-content-center gui-align-items-center" @tap="kfBtn()">
			<text class="gui-icons kf_icon">&#xe626;</text>
			<text class="kfBtn_text">联系客服</text>
		</view>
		<view class="kfTime">服务时间：07:30-21:00</view>
	</view>
</template>
<style>
	.footKf{position:fixed;left:0;bottom:100rpx;font-size:24rpx;color:#666;width:100%;}
	.kfTime{text-align:center;margin-top:20rpx;}
	
	.kfBtn{text-align:center;border:1px solid #eee;width:300rpx;margin:0 auto;border-radius:60rpx;line-height:70rpx;}
	.kf_icon{font-size:34rpx;margin-right:20rpx;}
	.kfBtn_text{font-size:30rpx;}
</style>

这就引出了我们标题所提出的问题：uni-app底部按钮fixed定位后被软键盘推起

解决方案

既然上面问题出来了，总要解决啊！来吧，开干

解决思路

获取窗口尺寸，监听窗口尺寸变化，比较变化后窗口的尺寸和实际窗口尺寸的大小做相应处理

代码实现

代码跟上面一样，无关代码没有贴出

<template>
	<view style="padding:50rpx;">
		<view style="margin-top:60rpx;">
		<form @submit="submit">
				<view class="gui-border-b gui-form-item" style="margin-top:80rpx;">
					<view class="gui-form-body">
						<input type="number" class="gui-form-input" v-model="driverTel" name="driverTel" placeholder="手机号" 
						@tap="hideFotter" @blur="showFotter" placeholder-style="color:#CACED0"/>
					</view>
				</view>
			</form>
			<view class="footKf" v-if="footer">
				<view class="kfBtn gui-flex gui-justify-content-center gui-align-items-center" @tap="kfBtn()">
					<text class="gui-icons kf_icon">&#xe626;</text>
					<text class="kfBtn_text">联系客服</text>
				</view>
				<view class="kfTime">服务时间：07:30-21:00</view>
			</view>
		</view>
	</view>
</template>
<script>
var _self;
export default {
	data() {
		return {
			footer: true,
			windowHeight: ''
		}
	},
	onLoad() {
		_self = this;
		uni.getSystemInfo({
			success: (res)=> {
				_self.windowHeight = res.windowHeight;
			}
		});    
		uni.onWindowResize((res) => {
			if(res.size.windowHeight < _self.windowHeight){
				_self.footer= false
			}else{
				_self.footer = true
			}
		})
	},
	methods: {
		showFooter : function(){
			this.footer= true;
		},
		hideFooter : function(){
			this.footer= false;
		}
	}
</script>

效果

标签：05,self,footer,软键盘,windowHeight,uni,app
来源： https://blog.csdn.net/bbxylqf126com/article/details/115538223