页面效果如图所示: input/texteare输入框回去焦点,键盘弹起。固定定位在底部的按钮 被顶起。
原因,页面size 变化。
在这里插入代码片
解决办法:
检测浏览器的resize事件,当高度过小时就可以判定为出现这种情况,这时把定位改成absolute或者直接隐藏掉之类的。
下边写一个 隐藏的方法
1.html页面
<div v-show="isOriginHei" >下一步</div>
2. 操作步骤
a.首先 在data中 定义 两个记录高度是 属性
data(){
return{
screenHeight: document.body.clientHeight, // 这里是给到了一个默认值 (这个很重要),
originHeight: document.body.clientHeight, //默认高度在watch里拿来做比较
originHeight :true // 这个属性是固定定位按钮的显隐开关
}
}
b. 在 vue mounted 的时候 去挂载一下它的方法 reisze 事件
mounted () {
const that = this
window.onresize = () => {
return (() => {
window.screenHeight= document.body.clientHeight
that.screenHeight= window.screenHeight
})()
}
}
c.watch 去监听这个 属性值的变化,如果发生变化则将这个val 赋值给 this.screenHeight ,比较,判断按钮是否该显示出来
watch: {
screenHeight (val) {
if(this.originHeight != val) {
this.isOriginHei = false;
}else{
this.isOriginHei = true;
}
}
}
这样就可以啦~ 快试试吧