vue H5页面固定定位按钮在安卓手机会被键盘顶起

最新推荐文章于 2024-04-02 13:43:57 发布

四岁半儿

最新推荐文章于 2024-04-02 13:43:57 发布

阅读量625

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45423865/article/details/128393967

版权

1.页面

<div class="bottomBtn" v-if="heightChange">固定按钮</div>

2.data

heightChange: true,
docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
showHeight: document.documentElement.clientHeight,   //实时屏幕高度

3.mounted

// 安卓  window.onresize监听页面高度的变化
let u = navigator.userAgent
const isAndroid = u.indexOf('Android') > - 1 || u.indexOf('Adr') > -1
const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if(isAndroid) {
	window.onresize = () => (() => {
	this.showHeight = document.body.clientHeight;
	})();
}

4.监听屏幕实时高度

watch:{
	// 监听屏幕实时高度
	 showHeight() {
		if (this.docmHeight > this.showHeight) {
		          this.heightChange = false;
		  } else {
		          this.heightChange = true;
		   }
	},
},