uniapp弹出手机键盘，布局被顶飞，导致页面混乱问题

场景：

        在pc端调试一切正常，当进入手机端，实现录入的时候，键盘收起的时候，页面被顶飞。

如下图从左到右的效果：

此时可以看到有两个问题：

        1）软键盘弹出时会挡住输入框，无法正常进行编辑。 

        2）软键盘收起时，页面布局会被软键盘占位，无法变回去。

以下是我的解决方案：

       1.输入框挡住问题：

                在page.json文件中找到该组件所对应的页面，添加下方app-plus中的两个配置。并重启项目。

{"path" : "pages/find/test/test","style" :                                                                                    {"navigationBarTitleText": "页面","enablePullDownRefresh": true,"navigationBarBackgroundColor": "#f8f8f8","navigationStyle": "custom","app-plus": {"softinputMode": "adjustResize","softinputNavBar": "none"}}
},

如下图可以看到，处理过后键盘确实不会被挡住，但是收起软键盘后，布局依旧会被软键盘占位撑起。

        2.软键盘收起时，页面布局会被软键盘占位，无法变回去问题：

                既然是软键盘占位导致布局错乱，那么可以通过限制高度，来防止dom高度被软键盘撑起。

                如下面的代码示例，在被意外撑起的容器（下面的my-dialog）中加入style来设置max-height（值可自行设置），以固定容器。

<!-- 模态框 -->
<view class="test_modal_outter" @touchmove.stop.prevent="moveHandle"><viewclass="test_modal"@tap="hideModal"><view class="my-dialog" @tap.stop="" :style="'max-height:'+(mainHeight + 120)+'px'+'background-color: lightyellow;position: fixed;bottom: 0;left: 0;'"><view class="my-modal" style="padding-bottom: 0;"><view class="head padding-part"><view class="content"><view class="text-part">全部评论（{{commentData.count}}）</view></view></view><!-- 省略 --></view></view></view>
</view>

高度获取部分js（示例参考代码） 

let sys = uni.getSystemInfoSync();
this.mainHeight =  sys.windowHeight / 1.8;

这样，容器将不会被软键盘撑起。

希望本文会对您有所帮助 ^_^