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