在移动项目开发中经常会遇到输入框获取焦点软键盘页弹起,页面高度被压缩,输入框获取焦点时弹不上去的问题,我本次的是vue的UI框架(vux)
解决办法如下代码:
只要在页面初始化完成的时候,获取屏幕的可视化高度,并将获得的可视化高度赋值给.flex就OK了
<template><div class="flex"><div class="flex-form"><group><x-inputstyle="text"title="姓名"placeholder="请填写真实姓名"></x-input></group><group><x-inputstyle="text"title="微信号"placeholder="请填写微信号以便联系"></x-input></group><group><x-inputstyle="tel"title="电话"placeholder="请填写真实电话"></x-input></group><group class="textarea"><x-textareatitle="收货地址"placeholder="地址详细至:省/市/区/街道":show-counter="false":rows="1"autosize></x-textarea></group><span class="submit">提交</span></div></div></template><script>export default {created() {// 获取.flex的可视区域的高let flexheight = document.documentElement.clientHeight;// 在页面整体加载完毕时window.onload = () => {// 把获取到的高赋值给.flexdocument.getElementByclassName('flex').style.height = `${flexheight}px`;};},};</script>