InfoQ 极客传媒 15 周年庆征文|position:fixed 虚拟按键触发后无法生效问题分析及解决方案探究

一、前言

uni-app

项目开发过程中，发现虚拟按键触发后导致按钮被顶起，并不满足业务需求。

经检查样式，发现按钮设置的定位方式为固定定位。难道固定定位在此处并未生效？

.footer {
 position: fixed;
 width: 100%;
 bottom: 0;
 height: 120rpx;
 justify-content: center;
 align-items: center;
 border-top: 1rpx solid #F0F0F0;
 background: #ffffff;
}


二、原因分析及解决措施

出现以上问题的原因是由于虚拟按键弹出时，

CSS

设置的样式未生效，需要在检测虚拟按键弹出时动态设置按钮样式。

解决思路如下：通过监听虚拟键盘的展示收起，动态控制按钮布局。

首先，初始化数据信息如下：

hideFlag: true,
hideClass: 'hide'


视图渲染部分，应用动态样式设置按钮布局：

<view class=&quot;footer&quot; :class=&quot;hideFlag ? hideClass : ''&quot;>
 <view @click=&quot;btnClick&quot; class=&quot;btn&quot; :class=&quot;{'btn-disable': btnDisabled}&quot;>提交</view>
</view>


虚拟按键监听逻辑如下：

onLoad() {
 uni.onKeyboardHeightChange(res => {
 // 虚拟按键隐藏
 if (res.height === 0) {
 this.hideFlag = true;
 } else {
 // 虚拟按键弹出
 this.hideFlag = false;
 }
 })
},


CSS

样式如下：

.hide {
 position: fixed;
 bottom: 0;
}


三、延伸阅读 uni-app版本检查弹窗去除

出现原因

：手机端

SDK

版本和

HBuilderX

版本不一致。

解决办法

• 在项目中找到 
  manifest.json
   配置文件；

• 点击源码视图；

• 找到 
  app-plus
  配置节点；

• 找到下面的
  compatible
  字段（没有则添加）,添加一段忽略提示的代码

 "ignoreVersion": true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持 


完整配置如下：

"compatible" : {
 "ignoreVersion": true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持 
},


四、拓展阅读

• 《
  Vue进阶（幺伍玖）：动态样式设置
  》