问题描述：移动端页面输入框聚焦伴随着键盘弹起，底部icon浮到键盘上方，导致样式不友好
解决思路：在键盘弹起时，不让原本固定在底部的icon自动浮起。监听屏幕的实时高度，控制底部按钮的显示与否，从而达到按钮固定在底部的效果。
解决方案（本例是在vue框架下实现的解决方案代码）：
html:
|
1
2
3
4
|
<div class="login-content-footer" v-if="heightChange"> <img src="../../assets/images/login-wxLogin.png" class="login-content-footer-wxLogin" @click="wxLogin" v-show="WxFlag"> <img src="../../assets/images/personal-footer.png" class="login-content-footer-img"></div> |
data部分:
|
1
2
3
4
5
6
7
|
data () { return { heightChange: true, docmHeight: document.documentElement.clientHeight, //默认屏幕高度 showHeight: document.documentElement.clientHeight, //实时屏幕高度 }} |
监听屏幕实时高度：
|
1
2
3
4
5
6
7
8
9
|
watch:{ showHeight() { if (this.docmHeight > this.showHeight) { this.heightChange = false; } else { this.heightChange = true; } },} |
mounted周期:
|
1
2
3
4
5
6
|
mounted() { // window.onresize监听页面高度的变化 window.onresize = () => (() => { this.showHeight = document.body.clientHeight; })();}, |
结果：
Android手机键盘弹起时实时屏幕高度会改变，但是苹果手机无论是默认输入法还是安装的其他输入法，键盘弹出的高度不会改变，但是庆幸的是大部分ios已经支持了fixed属性
还发现一个小的bug就是苹果手机点击输入框时偶尔会闪现一个icon,通过给父元素加入position:relative和足够的padding-bottom解决了，之后我发现可以用position:absolute定位父元素给position:relative和足够的padding-bottom能达到同样的效果^_^
原文：https://www.cnblogs.com/shuihanxiao/p/10642179.html