移动端fixed定位按钮在底部,键盘弹起,底部按钮顶上去

页面效果如图所示: 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;
                }
            }
}

这样就可以啦~ 快试试吧

猜你喜欢

转载自blog.csdn.net/MtangEr/article/details/88976671