----uni-app之解决底部按钮绝对定位后被软键盘推起的bug----

移动端h5页面经常会遇到软键盘顶起底部fixed定位元素,体验不好。记录下uni-app下同样的问题是如何解决的。

解决思路:获取窗口尺寸,监听窗口尺寸变化,比较变化后窗口的尺寸和实际窗口尺寸的大小做相应处理。直接上代码:
<!--html-->
<input  type="text" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" placeholder=""/>

<view v-if="tabbar">底部悬浮</view>

data(){
        return{
            tabbar: true,
            windowHeight: ‘‘
    }
},
onLoad() {
    uni.getSystemInfo({
        success: (res)=> {
            this.windowHeight = res.windowHeight;
        }
    });    
    uni.onWindowResize((res) => {
        if(res.size.windowHeight < this.windowHeight){
            this.tabbar = false
        }else{
            this.tabbar = true
        }
    })
},
methosd:{
    showTabbar(){
        this.tabbar = true;
    },
    hideTabbar(){
        this.tabbar = false;
    }
}

@click和@blur 分别解决安卓和ios 兼容问题
---------------------------------------------------------------------------------------------------------

ps:可以利用弹性布局,中间flex为1,底部按钮固定高度。

原文地址:https://www.cnblogs.com/zjy850984598/p/10638486.html

时间: 2024-10-10 15:40:18

----uni-app之解决底部按钮绝对定位后被软键盘推起的bug----的相关文章

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法

这个现象只出现在phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其它js框架我测试了几个(app framework, jquery mobile),好像没有这个问题. 我来描述一下这个现象: 1.运行phonegap打包的wp8程序,打开一个有输入框的界面,如下图: 2.点击输入框,使其弹出软键盘,界面会上移,如下图: 3.点返回键隐藏软键盘(或者点击界面上其它地方隐藏软键盘),此时界面不恢复原位,如下图: 我的一些研究结果: 1.这种现象只出现

360浏览器文本框获得焦点后被软键盘遮罩的问题

场景是这样的,站点上筛选按钮点击后弹出层(fixed),当输入框获取焦点以后弹出系统自带的软键盘,在android上十款浏览器挨个测试比对,发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了.截图如下                      (未获取软键盘焦点的情况)               (chrome浏览器调起软键盘的情况)            (360浏览器调起软键盘情况) 那么问题来了,浏览器的软键盘显示出来又哪几种情况呢?英文  中文(网上找的) 经过简单的了解,大

Swift - UITextField完成输入后关闭软键盘

总结了以下几种方式,欢迎补充  1,为空白区域绑定Touch Up Inside事件  2,重写touchesEnded方法  3,为TextField绑定Did End On Exit事件 一.点击编辑区域以外的地方时关闭(空白处区域绑定Touch Up Inside事件)     新建一个项目,打开Main.storyboard,添加一个Text Field,与ViewController建立连接,然后点击空白处,在右边窗口修改Custom Class 的class改为UIControl  

完美解决点击空白处,隐藏软键盘

在做一对一聊天的时候,应该做成类似微信的那种处理方式,点击空白处以及非EditText处的时候可以隐藏软键盘. 网上搜的时候搜到一个靠谱的做法,链接如下:http://www.cnblogs.com/coding-way/archive/2012/07/10/2585511.html 代码如下: public class HomeActivity extends Activity { ...... @Override public boolean dispatchTouchEvent(Motio

android 自定义adapter和线程结合 + ListView中按钮滑动后状态丢失解决办法

adapter+线程 1.很多时候自定义adapter的数据都是来源于服务器的,所以在获取服务器的时候就需要异步获取,这里就需要开线程了(线程池)去获取服务器的数据了.但这样有的时候adapter的中没有数据. 如下面的代码: 这就是在initData中异步获取服务器的数据,然后实例化adatper,再将adapter赋给listView. 2.initData()中的代码是: 这里线程要睡眠5秒钟,是为了模仿网络的耗时操作 3.Handler: 在Handler中接收到数据后给list赋值后,

Mui WebApp页面 绝对定位 软键盘弹出时顶起底部按钮问题

做WebApp页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样: 这个时候,可以给 底下的 Button 或者包含这个Button的Div  添加一个CSS样式:z-index: -1

我的长大app开发教程第二弹:完成ContentFragment底部按钮

在开始之前,先上一张效果图 突然发现有点知乎的味道...的确..知乎灰#989898,知乎蓝15,136,235(逃.... 1.学P图 想我大一的时候也用过不少Adobe的软件,昨天重新打开我的Photoshop,电脑提示缺少什么.dll文件,最后弄了一上午,是因为vc2012的运行库出了问题,最后发现一个软件特别好用:DirectX Repair,可以完美解决.dll丢失的问题. UI素材我是在google的icons素材库下载的https://github.com/google/mater

[Phonegap+Sencha Touch] 移动开发24 包wp8.1的App,弹出软键盘输入框聚焦实施后,无移动采收率方法来解决接口

这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile),好像没有这个问题. 我来描写叙述一下这个现象: 1.执行phonegap打包的wp8程序,打开一个有输入框的界面,例如以下图: 2.点击输入框,使其弹出软键盘.界面会上移.例如以下图: 3.点返回键隐藏软键盘(或者点击界面上其他地方隐藏软键盘),此时界面不恢复原位.例如以下图: 我的一些研究结果

vue 手机键盘把底部按钮顶上去

背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了. 实现原理:当页面高度发生变化的时候改变底部button的样式,没点击前button在底部固定position: fixed;当我点击input的时候样式变成position: static!important; 一开始的解决方案是通过input的聚焦和失焦,但是有个问题,当我点击input的时候聚焦,再点击键盘上的隐藏按钮时就没办法恢复原来的fixed. 原来的样式主要是positio