移动端IOS H5（VUE）界面被键盘顶起，键盘收起后无法恢复正常

PS：windowscrollTo 不了解的可以点这里哦 scrollTo

借来同事的手机试了试，真的是激动用了两部iPhone手机测试，都ok了！！！nice

这个问题就这样可以解决了！

另外，在开发中遇到一个问题就是，为了做一些设备的兼容，会使用计算的方法来给元素获取高度和宽度，然而首次进入某个界面的时候，vm refs[ref]getBoundingClientRect()top 为 0，所以采用如下判断的方式给赋值之后就可以了

各位大佬关于自适应和兼容有什么建议可以留言哦，本人菜鸟求指教，谢谢

1筛选的条件不固定（筛选的高度不固定），数据不多的情况下所加起来的高度不超过页面显示的高度，正常显示；

2如果数据超多，数据显示的高度加起来超过了当前页面的高度，table出现滚动条，页面不出现滚动条，分页组件依然可以显示

搜索条件

js中封装好的table的高度

将table的高度js文件单独引入页面，或者挂载到全局方法

table中高度的使用

在进行聊天界面开发的时候，发现安卓手机键盘会把界面顶起，但是不会收回来，在网上找到了这个方法解决

之前我是在mounted中根据documentactiveElementtagName的值判断是否为INPUT去改变键盘d起的高度

但是在下方加了一个按钮之后，发现点击语音按钮后再切换到输入框，

documentactiveElementtagName的值变成BODY了，查找资料发现

所以此方法在点击语音后再也调用不起来，困扰了一天的问题，记录一下

大家可以看到当重新进入列表页数据进行了刷新这明显不符合需求

查百度问同事知道了一个东西叫keep-alive于是决定使用这个内置组件试试

然后吧发现问题确实能够得到结局但是出了个新问题如图:

问题1:界面虽然被缓存但是当退出到前一个页面再进入的时候界面还是被缓存状态,我觉得这是不合理的

问题2:被缓存的界面从上个页面再次进入时动画效果不对

基于这两个问题我也查了一些资料和博客,也总结了第二套方案

这个rank是用来判断当前组件所在的级别

比如A组件->B组件 ->C组件,那么A的rank为1,B的rank为2,C的rank为3,

在beforeRouteLeave中

这个貌似能解决问题,但是!!!

问题1: 这个返回动画就是不对(在浏览器可能看不出啥问题,在真机很明显)因为这个框架是前端给的动画我也不会弄如果能解决跳转动画问题,我觉得这个方案基本可以符合要求如果有大佬可以解决,方便的话指导下小弟而且能解决这个动画问题后面也不用看了

问题二:有的时候会出现缓存了上一次的bug(也不知道咋回事出现的还挺频繁)

在这里就是我自己总结的一个方案虽然能完美解决这些问题不过对开发不友好,维护成本太高不建议使用(如果实在没办法的话)

首先在vuex中定义需要缓存的界面的数据(先测试的滑动,所以分开写的可以只写一个data)

先说下高度的滑动吧这个滑动的高度也是需要保存的界面中沃使用cube-ui的scroll组件

给data增加一个scrollHeight属性缓存界面高度还有需要缓存的数据model

当界面滑动停止调用scrollend方法对scrollHeight进行赋值

每次进入界面即在created 函数中取出缓存的高度,如果有高度那么让它自动滑动并重新给scrollHeight进行赋值

这边是我封装的一个js实现是这样的

这样就可以保证滑动的缓存(data与高度类似)

这是data的js

当界面进行跳转对组件的rank进行判断如下:

而在进入的时候

最近做了一个项目，需要表格的高度跟着浏览器的高度变化，页面不会出现滚动条，并且分页器一直在浏览器的底部

表头的搜索框的高度可以伸缩，不是固定的，这就需要监听到搜索框的高度，用浏览器的高度减去搜索框的高度和分页器的高度就是表格的高度了

先自定义监听方法吧，如下：

现在组件内注册

directives方法跟data，methods方法是平级的

需要监听的组件绑定这个方法，这里是监听表头的高度

这时就已经监听到的表头的宽高变化了，就可以拿出来用了

(文末是如何设置bar的高度）

问题概述：

最近要做一个滑动的tab列表，列表有两级（两行），第二行需要滑动。整个列表容器设置了高度为88px，每一行设置了高度为44px，但是用了vue-scroll之后，第一行变成了22px多，第二行内容是44px，滚动条还有20px左右。

于是查了一下vue-scroll的设置，有一项是sizeStrategy，默认为‘percent’，即height和width均为100%

所以vue-scroll的高度被设置成了父级的高度88px，这里布局用的flex，按比例缩放了，所以会把第一行挤小，第二行比44px高。

解决办法：

在vue-scrol外边加一层div，并设置高度为44px，这样vue-scroll的高度就是44px100%=44px了。

注：在tablist处设44px。而在tab处设置不管用。

待解决问题： 试过用tab那个div包裹vue-scroll，vue-scroll里边直接放ul，导致整个页面都是可滑动的。不太懂是什么原因。

tips：

设置bar的高度，直接在bar选项里设置height就行了,默认是6px（设置示例里没有写height，害我试了他写了的好几个属性，然后一气之下直接写了height就好了。。。）

以上就是关于移动端IOS H5（VUE）界面被键盘顶起，键盘收起后无法恢复正常全部的内容，包括:移动端IOS H5（VUE）界面被键盘顶起，键盘收起后无法恢复正常、给vue，element-ui中的table添加动态的高度、vue解决安卓手机软键盘d出,页面高度被顶起等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！