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

【释义】

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

 

【源码】

 

 1 <template>
 2     <view class="grace-margin">
 3         <input type="text" value="" placeholder="请输入!!!" style="margin-top: 30vh;border-bottom: 1upx solid #000;"/>
 4         <view class="grace-bg" :style="'height:'+screenHeight+'px !important;'"></view>
 5     </view>
 6 </template>
 7 <script>
 8     export default {
 9         data() {
10             return {
11                 screenHeight: ''
12             }
13         },
14         onl oad() {
15             this.screenHeight = uni.getSystemInfoSync().windowHeight;
16             console.log(uni.getSystemInfoSync());
17         },
18         methods: {}
19     }
20 </script>
21 <style scoped>
22     .grace-bg {
23         position: absolute;
24         filter: blur(5px);
25         z-index: -1;
26         background: url('https://uniapp-1257202511.cos.ap-chengdu.myqcloud.com/1558150500602.jpg') no-repeat;
27         top: 0;
28         left: 0;
29         right: 0;
30         bottom: 0;
31         background-size: cover;
32     }
33 </style>