zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    LayUI上传图片
    快递查询
    安装 Python
    HTML5 WebSocket
    反射实例
    反射
    工厂模式之工厂方法案例
    工厂模式之简单工厂案例
    第三方登录
    封装条形码MaHelper
  • 原文地址:https://www.cnblogs.com/cisum/p/10978316.html
Copyright © 2011-2022 走看看