InfoQ 极客传媒 15 周年庆征文|position:fixed 虚拟按键触发后无法生效问题分析及解决方案探究
一、前言
uni-app项目开发过程中，发现虚拟按键触发后导致按钮被顶起，并不满足业务需求。
经检查样式，发现按钮设置的定位方式为固定定位。难道固定定位在此处并未生效？
复制代码
二、原因分析及解决措施
出现以上问题的原因是由于虚拟按键弹出时，CSS设置的样式未生效，需要在检测虚拟按键弹出时动态设置按钮样式。
解决思路如下：通过监听虚拟键盘的展示收起，动态控制按钮布局。
首先，初始化数据信息如下：
复制代码
视图渲染部分，应用动态样式设置按钮布局：
复制代码
虚拟按键监听逻辑如下：
复制代码
CSS样式如下：
复制代码
三、延伸阅读 uni-app 版本检查弹窗去除
出现原因：手机端SDK版本和HBuilderX版本不一致。
解决办法
在项目中找到
manifest.json配置文件；点击源码视图；
找到
app-plus配置节点；找到下面的
compatible字段（没有则添加）,添加一段忽略提示的代码
复制代码
完整配置如下：
复制代码
四、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/5a848e9d1c5bbfe5a7f309d01】。文章转载请联系作者。
No Silver Bullet 2021.07.09 加入
岂曰无衣 与子同袍
评论