之前一直没发现这个问题,因为一直用的模拟器在看页面布局。导致后期交给测试的时候,测试用安卓手机一下就看出来了。软键盘一出来,input中的文本就被顶上去了。
这里提供两种思路。
第一种:获取软键盘高度,在父盒子中添加style。实时根据软键盘高度调整
html代码
<view class="revoke-box-input" :style="{'padding-bottom':-KeyboardHeight+'px'}">
<!-- <uni-easyinput v-model="ideaValue" clearable="false" placeholder="请输入内容"></uni-easyinput> -->
<input type="text" v-model="ideaValue" @keyboardheightchange="hightchange" placeholder="请输入内容">
</view>
js代码
hightchange(e){
console.log('键盘变化',e.detail.height);
this.KeyboardHeight=e.detail.height
},
第二种:上面的方法还是不行的话。可能就是另外一种情况,在父盒子的css中设置了position:flex,导致内容被顶走了,还一直不知道怎么解决。 看了一下自己的代码,给最大的父盒子设置了position:flex。所以出现了这种问题
父盒子css删除position:flex。ok搞定。