具体问题

我是一个全屏的H5页面,高度用的是100vh,全屏 = 页面。

input输入框固定在底部,input聚焦时软键盘弹出,安卓时页面被压缩,变成了全屏 = 页面 + 软键盘,页面就变形了。

ios是整个页面会被往上顶,发生滚动。

解决办法

第一步:解决页面被压缩、往上顶问题
测试发现,当iput框位置高于软键盘弹出的位置时页面不会被挤压、往上顶,而input聚焦的操作先于软键盘弹出,所以当input聚焦时使input的位置高于软键盘弹出位置。

这时如果不做任何操作的话,input框的位置是有问题的,所以与此同时我们要将input框还原到适当位置(看需求)。

goUp: function(){ //获得焦点事件
			//原来单位为100vh,输入法弹出时100vh的计算方法跟原来的计算方法不一样,会导致页面变形
			this.$refs.main.$el.style.height = this.initialHeight + 'px';
			this.$refs.liveOnline.$el.style.height = this.initialHeight + 'px';	
			
				this.$refs.dialogbox.$el.style.bottom = this.initialHeight + 'px';//让input框处于高于输入法的位置,可以让页面不被输入法往上顶或压缩
				
				setTimeout(() => !this.isFlag && (this.$refs.dialogbox.$el.style.bottom = (this.keyHeight != 0 ? this.keyHeight : this.initialHeight/2) + 'px'),100);//同时让input框处于合适的位置,这个值需要获取到键盘的高度 ps:某些情况获取不到,算个大概
		}

我的需求是要将input处于软键盘的正上方,所以我需要获取到软键盘的高度。

第二步:安卓软键盘高度可以通过监听页面高度变化来获取
页面初始化的时页面高度为initialHeight = window.innerHeight,当input聚焦后,软键盘弹起页面高度为window.innerHeight,可得软键盘高度为keyHeight = initialHeight - window.innerHeight

这里有一个问题就是由于input输入框聚焦时执行的事件比页面发生高度变化执行的事件要先,所以第一次input输入框聚焦时keyHeight还未被赋予软键盘的高度 。

我想了一个解决办就是监听keyHeight的改变,当keyHeight改变时设置input的位置,并且设置了一个参数isFlag(初始值为true),来控制第一次input聚焦时不设置input的位置。

uni.onWindowResize((res) => {
	if(this.initialHeight != window.innerHeight && this.isFlag){
					this.keyHeight = this.initialHeight - window.innerHeight;
					this.isFlag = false;
				}
})

keyHeight:function(value){
			this.$refs.dialogbox.$el.style.bottom = this.keyHeight + 'px'
		}

ps: ios端监听不到页面高度变化暂时没找到合适的方法来获取软键盘高度。虽然ios可以监听页面滚动,软键盘弹起页面发生滚动,获取页面滚动的距离就是软键盘的高度,再将页面滚动距离归为0,但是归为0时页面会出现白色的抖动。

遂放弃了这种方法,经与产品商议,ios端就让软键盘将页面顶起。

onPageScroll: function(Object) {
		//获取页面滚动的距离
		this.keyHeight = Object.scrollTop();
		//将页面滚动距离归为0
		uni.pageScrollTo({
						scrollTop:0,
						duration: 0
					})
	}

第三步:软键盘收起时页面还原
监听input失焦事件将将input位置还原、取消蒙层显示。
因为有的时候会出现软键盘收起页面上滑的页面未还原的bug,所以input失焦时将页面上滑距离归为0。

 goDown: function(){//失焦事件
			setTimeout(() => {//延时是为了处理点击发送按钮失焦的情况
				this.$refs.dialogbox.$el.style.bottom = 0;
				this.isDialogBoxUp = false;
				uni.pageScrollTo({
					scrollTop:0,
					duration: 0
				})
			},100)
		}
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐