问题引出

昨天在测试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"></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>

效果

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

记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
php用cdn打不开,开启 CDN 后 wordpress 后台打不开的解决办法
现在很多站长把网站放到国外,使用 CDN 加速功能提高国内的访问速度,前面提到过开启腾讯云 CDN 后 wordpress 后台显示:连接被重置的解决办法,而今天遇到的是另外一种情况,有时候会遇到开启 ...
苹果备忘录分享不了微信提示无法连接服务器,关于微信分享后，提示“未验证应用”的解决办法(iOS)...
目录关于微信分享后,提示"未验证应用"的解决办法 1.Universal Link : 1.1 通用链接是iOS9推出的一项新功能,如果你的应用(app)支持通用链接(Unive ...
关于微信分享后，提示“未验证应用”的解决办法(iOS)
关于微信分享后,提示"未验证应用"的解决办法目录 1.Universal Link : 2.配置步骤 3.检测配置 4.注意点目录关于微信分享后,提示"未验证应用& ...
C# dgv自动排序后，各种样式设定无效的解决办法
C# dgv自动排序后,各种样式设定无效的解决办法在网上搜索一些资料还是解决不了,所以自己写了记录一下: 给dgv添加一个sorted事件,每次点击小三角排序时就会调用这个方法,在这里将样式重新设定 ...
银行卡在ATM机器上插入后显示IC磁条芯片卡拒绝交易解决办法
描述:银行卡在ATM机器上插入后显示IC磁条芯片卡拒绝交易解决办法步骤: 取出银行卡,将银行卡放在银行卡IC卡感应位置 ATM机主页面选择非IC卡业务,最后会识别并可以取钱,成功成功后将银行卡再 ...
cocos creator 设置开启canvas 透明后半透明图片不正常的官方解决办法
cocos creator 设置开启canvas 透明后半透明图片不正常的官方解决办法必须用 one,one minus src alpha,否则 web 端的贴图渲染时会莫名其妙和 canv ...
Mac更新系统后，无法正常打开AE的解决办法
AE可以帮助您高效且精确地创建无数种引人注目的动态图形和震撼人心的视觉效果.利用与其他Adobe软件无与伦比的紧密集成和高度灵活的2D和3D合成,以及数百种预设的效果和动画,为您的电影.视频.DVD和 ...
“已连接，但无法访问互联网”开机后wifi有感叹号, 时间无法同步解决办法
"已连接,但无法访问互联网"开机后wifi有感叹号, 时间无法同步解决办法在手机的shell里以root用户执行: # settings put global captive_p ...

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

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

问题引出

解决方案

解决思路

代码实现

效果

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

最新文章

热门文章