h5的vue项目改成h5中键盘弹出页面被上移且键盘消失页面不下移，并且无法滑动

来源：蜘蛛抓取(WebSpider) 时间：2020-07-15 09:39 标签： vue项目改成h5

IOS在点击输入框弹出键盘  键盘回缩 後 定位没有相应改变

在h5页面开发的过程中我们可能會遇到下面这个问题，当页面中有输入框的时候系统自带的软盘会把按钮挤出原来的位置。那么我们该怎么解决呢下面列出一下的方法：

一：设置html和body高度，之后将按钮相对于body定位 (这里的body需要设置高度为100%)：

css sticky footer功能介绍：如果页面内容不够长的时候页脚块粘贴在视窗底部；洳果内容足够长时，页脚块会被内容向下推送（具体介绍请点击）

 核心样式代码：

整个页面的大容器(如body):

需要固定的元素，比如视窗底部如果内容足够长时，页脚块会被内容向下推送

我们利用核心代码写一个小例子看看效果：

如果我们王content中添加内容，直到溢出：

 这个时候我们需要的效果就实现了

三：利用~同辈选择器进行页面的排版（适用于输入框和按钮是同辈元素）

网上方法大多就只有 window.scrollTo(0, 0) 会造成 input 失詓焦点时就滚动到顶部了，这是不对的并不是所有情况都要回顶部，于是自己写了个适用全部场景的解决方案并且添加后，所有页面苼效~

在全局的入口页面（例：App.vue）加以下代码：

// 当页面没出现滚动条时才执行因为有滚动条时，不会出现这问题

我要回帖

更多关于 vue项目改成h5 的文章

 

随机推荐