移动端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;
                }
            }
}

这样就可以啦~ 快试试吧

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值