写点什么

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

  • 2022 年 6 月 12 日
  • 本文字数:768 字

    阅读完需:约 3 分钟

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="footer" :class="hideFlag ? hideClass : ''">  <view @click="btnClick" class="btn" :class="{'btn-disable': btnDisabled}">提交</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版本不一致。


解决办法


  1. 在项目中找到 manifest.json 配置文件;

  2. 点击源码视图;

  3. 找到 app-plus配置节点;

  4. 找到下面的compatible字段(没有则添加),添加一段忽略提示的代码


  "ignoreVersion": true //true表示忽略版本检查提示框,HBuilderX1.9.0及以上版本支持 
复制代码


完整配置如下:


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

四、拓展阅读

发布于: 刚刚阅读数: 4
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
InfoQ 极客传媒 15 周年庆征文|position:fixed 虚拟按键触发后无法生效问题分析及解决方案探究_前端_No Silver Bullet_InfoQ写作社区