Lspring
Lspring
  • 发布:2018-05-03 20:48
  • 更新:2018-05-04 08:13
  • 阅读:1818

软键盘挤压布局问题

分类:MUI

软键盘挤压导致软键盘上面有块小的布局

如上图,我这里用的是mui-scroll-wrapper区域滚动,占了布局的90%,其余10%就是底部布局

我这里监听了textarea的focus事件,当点击输入框的时候调用下面代码:
var height = document.documentElement.clientHeight || document.body.clientHeight;
var footerHeight=$("#footer").height();
var scrollHeight=$("#wrapper").height();
window.onresize = function() {
var heightView = document.documentElement.clientHeight || document.body.clientHeight;
if(heightView < height) { //原始界面小于弹出后页面的变化 说明软键盘弹出
self.isResize=true;
var scrollHeight=$("#wrapper").height();
$("#wrapper").scrollTop(scrollHeight+10,100);
}else{
self.isResize=true;
$("#wrapper").scrollTop(scrollHeight-10,100);
}
}

弹出软键盘后底部的footer布局也跟着挤压发生了改变,如果隐藏掉,则会留下空白的一小块。
各位大神有人遇到过这个问题吗?请教请教

2018-05-03 20:48 负责人:无 分享
已邀请:
skysowe

skysowe

https://blog.csdn.net/kk_yanwu/article/details/73332704

http://ask.dcloud.net.cn/article/12615

以上两篇文章用了两种不同的思路来解决,适用于不同的情况,一种是浮动元素,一种是固定位置元素,可以根据文章里的代码,写两个小例子验证一下,我只是搬运工。

该问题目前已经被锁定, 无法添加新回复