uniapp - 键盘弹起背景图片不会被挤压

【释义】

uni.getSystemInfoSync()获取屏幕可用高度windowScreen做为背景图高度即可(非虚拟DOM也可以使用本思路).

【源码】

 <template>
     <view class="grace-margin">
         <input type="text" value="" placeholder="请输入!!!" style="margin-top: 300upx;border-bottom: 1upx solid #000;"/>
         <view class="grace-bg" :style="'height:'+screenHeight+'px !important;'"></view>
     </view>
 </template>
 <script>
     export default {
         data() {
             return {
                 screenHeight: ''
             }
         },
         onLoad() {
             this.screenHeight = uni.getSystemInfoSync().windowHeight;
             console.log(uni.getSystemInfoSync());
         },
         methods: {}
     }
 </script>
 <style scoped>
     .grace-bg {
         position: absolute;
         filter: blur(5px);
         z-index: -1;
         background: url('https://uniapp-1257202511.cos.ap-chengdu.myqcloud.com/1558150500602.jpg') no-repeat;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-size: cover;
     }
 </style>