zoukankan      html  css  js  c++  java
  • uniapp 自适应不同比例的屏幕

      移动端APP应用中,不同设备屏幕长宽比存在差异。因此有些固定高度的页面,在不同设备就会产生不同的显示效果。


      比如图中左边布局正常,更换了一个比例不同的屏幕,显示就产生了一条间隙。

      

    解决思路:AB和CD两个区域的可以固定高度,然后BC区域根据不同的屏幕尺寸调整它的高度,即可实现不同尺寸屏幕的自适应。

     那么程序需要做的:
    1、获取设备可用屏幕总高度。
    3、获取固定区域的高度
    2、滚动框height属性绑定变量。


    一、获取设备可用屏幕总高度。

    uni.getSystemInfo({
        success: function (res) {
            var windowHeight= res.windowHeight;                
        }
    });

    二、获取固定区域的高度,通过参照元素的位置信息,来计算C区域的高度

    var _this = this;
    var diffHeight = 0;
        let view = uni.createSelectorQuery().select("#scrollbody");
        view.boundingClientRect(data => {                        
            diffHeight = data.top ;                //C区域上延到屏幕顶端的距离,即A区域的高度            
            view = uni.createSelectorQuery().select("#tfloor1");
            view.boundingClientRect(data => {                                
                diffHeight += data.height ;        //B区域的高度                                                
                _this.tableheight = _this.GLOBAL.screenHeight - diffHeight;    
                //可以屏幕总高度 - C区域上延到屏幕顶端的距离 - B区域的高度 
                //即获得C区域要调整的高度                                            
            }).exec();                                                            
        }).exec();    
    
    三、height属性绑定变量。

    将获取的C区域高度,绑定到template样式。
    首先注意,不能绑定data属性,要绑定计算属性

    computed: {           
        scrollerHeight: function() {                    
            return this.scrollHeight+'px';
        }    
    },        

    template样式height属性绑定计算属性。

    :style="{height:scrollerHeight}

    另一种解法就是:
    直接flex布局cloumn,AB、CD固定高度,BC的flex_grow设置为1即可
     

    
    版权声明:本文为CSDN博主「aolixiaox」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/wosind/article/details/103111292
  • 相关阅读:
    应用实例-最大子列和问题
    什么是算法
    什么是数据结构
    数据结构与算法-Python/C(目录)
    collections模块
    色彩缤纷的Python(改变字体颜色及样式)
    取数组中一段值的算法(转)
    开发者必备,超实用的PHP代码片段(转)
    php中数组自定义排序
    rand值出现负数的解决方案
  • 原文地址:https://www.cnblogs.com/caihongmin/p/15015544.html
Copyright © 2011-2022 走看看