uniapp - 鍵盤彈起背景圖片不會被擠壓

【釋義】

uni.getSystemInfoSync()獲取屏幕可用高度windowScreen作爲背景圖高度便可(非虛擬DOM也可使用本思路).

 

【源碼】

 

 1 <template>
 2     <view class="grace-margin">
 3         <input type="text" value="" placeholder="請輸入!!!" style="margin-top: 300upx;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         onLoad() {
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>