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>