uni,H5页面,解决软键盘弹起页面被挤压、被往顶的问题
具体问题我是一个全屏的H5页面,高度用的是100vh,全屏 = 页面。input输入框固定在底部,input聚焦时软键盘弹出,安卓时页面被压缩,变成了全屏 = 页面 + 软键盘,页面就变形了。ios是整个页面会被往上顶,发生滚动。解决办法第一步:解决页面被压缩、往上顶问题测试发现,当iput框位置高于软键盘弹出的位置时页面不会被挤压、往上顶,而input聚焦的操作先于软键盘弹出,所以当input聚
具体问题
我是一个全屏的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)
}
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)