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

红太狼 2022-11-17 10:18 1852阅读 0赞

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

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

# 问题引出 #

昨天在测试app的时候，测试提出新增个人信息界面底部的input框在输入的时候会被软键盘遮挡而看不到正在输入的内容，如下图  
![20210409100044861.gif][]  
可以看到在发证机关聚焦的时候被软键盘遮挡了，前面说了我们的app是**uni-app发布成H5嵌套在android原生壳子里的webview**中的，解决这个办法就要从android壳子入手了，所以有了下面的解决方案

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

现在再来看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70][]

到这里是不是觉得皆大欢喜了?那么你就太年轻了，骚年！我们退出app，进入到登录界面重新登录，看到下图是不是突然间就傻眼了  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 1][]  
**联系客服**区域竟然被软件盘顶了上去，我们看下联系客服的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"></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"></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>

## 效果 ##

![20210409104531899.gif][]

[20210409100044861.gif]: /images/20221022/08b063fa0d9e416e8365f4213bcdc6f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70]: /images/20221022/d49fdef1bf49442e9056e849edd7b5e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JieHlscWYxMjZjb20_size_16_color_FFFFFF_t_70 1]: /images/20221022/b57629df1d334416a7e8f83e7d7a0319.png
[20210409104531899.gif]: /images/20221022/f2ac2d7a8fe341b58712696f0f086b25.png