說明正常使用weex開發(fā)頁面過程中使用的是750進(jìn)行頁面布" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > WEEX-EEUI 頁面的高度問題（頁面高度設(shè)置為多少才對(duì)？）

WEEX-EEUI 頁面的高度問題（頁面高度設(shè)置為多少才對(duì)？）

時(shí)間：2023-09-09 10:12:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-09 10:12:01 來源：網(wǎng)站運(yùn)營

WEEX-EEUI 頁面的高度問題（頁面高度設(shè)置為多少才對(duì)？）：

前言

最近在使用EEUI開發(fā)weex頁面，遇到了一些坑，關(guān)于列表頁面底部有按鈕的頁面布局問題提出了一個(gè)解決方案。

說明

正常使用weex開發(fā)頁面過程中使用的是750進(jìn)行頁面布局的，這個(gè)尺寸是參考了IOS的屏幕尺寸進(jìn)行設(shè)定的，android其實(shí)是沒有這個(gè)分辨率的尺寸的，android有一個(gè)非常相近的屏幕分辨率那就是720*1280 那么既然android沒有這個(gè)分辨率那怎么能做到嚴(yán)絲合縫呢？，所以在使用過程中，android的頁面高度其實(shí)是一直在變化的，我們得找到750對(duì)飲的不同屏幕的設(shè)計(jì)高度。weex進(jìn)行了等比例縮放。

舉例說明一下： 小米6的設(shè)備，屏幕分辨率是1080*2248（包含狀態(tài)欄和底部按鍵欄的高度） 1080/750=2248/X

那么此時(shí)如果我們想把頁面占滿的高度X=2248*750/1080=1561

我們可以拿1561在小米6設(shè)備上做一下簡單的測試，寫一個(gè)空白頁面，然后把頁面的高度用1561寫死，并為頁面添加背景色

<div style="background-color: red;" :style="{height:realPageHeight}"></div>我們可以適當(dāng)?shù)男薷膔ealPageHeight的高度，看看是不是正確，通過實(shí)踐我們發(fā)現(xiàn)是ok的。

如何適配狀態(tài)欄，原生標(biāo)題欄，和底部按紐欄高度

通過上面我們對(duì)頁面高度的計(jì)算，不難發(fā)現(xiàn)只要掌握每個(gè)屏幕750/屏幕寬度的系數(shù)就能搞定 再就是計(jì)算出不同設(shè)備的三個(gè)像素高度

于是我們可以使用以下代碼來獲得，關(guān)于設(shè)備的三個(gè)高度我是通過QMUI的工具類獲得的。

1.修改weex sdk 初始化的地方

//屏幕真實(shí)高度 int screenHeight=QMUIDisplayHelper.getRealScreenSize(this)[1]; //屏幕真實(shí)寬度 int screenWidth=QMUIDisplayHelper.getRealScreenSize(this)[0]; //屏幕原生title高度 int pageTitleHeight=QMUIDisplayHelper.dp2px(this,60); //屏幕內(nèi)容高度 int pageHeight=QMUIDisplayHelper.getScreenHeight(this); //屏幕狀態(tài)欄高度 int statusBarHeight= QMUIDisplayHelper.getStatusBarHeight(this); //判斷底部導(dǎo)航欄是否存在 boolean hasNav=screenHeight!=(pageHeight+statusBarHeight); //底部導(dǎo)航菜單欄高度 int NavMenuHeight=hasNav?QMUIDisplayHelper.getNavMenuHeight(this):0; WXSDKEngine.addCustomOptions("NavMenuHeight", String.valueOf(NavMenuHeight)); WXSDKEngine.addCustomOptions("statusBarHeight", String.valueOf(statusBarHeight)); WXSDKEngine.addCustomOptions("pageHeight", String.valueOf(pageHeight)); WXSDKEngine.addCustomOptions("pageTitleHeight", String.valueOf(pageTitleHeight)); WXSDKEngine.addCustomOptions("deviceWidth", String.valueOf(screenWidth)); WXSDKEngine.addCustomOptions("deviceHeight", String.valueOf(screenHeight));2.在weex寫一個(gè)通用方法來獲取你需要的代碼高度

/** * * 獲取頁面除去title高度后的高度 */ getPageContentHeight(){ const { env } = weex.config; console.log('height:'+env.deviceHeight+'width:'+env.deviceWidth+'pageTitleHeight:'+this.getTitleHeight()+'NavMenuHeight:'+env.NavMenuHeight+'statusBarHeight:'+env.statusBarHeight+'pageHeight:'+env.pageHeight) const xishu=750/env.deviceWidth; const realDesignHeight=env.deviceHeight*xishu; const realNavMenuHeight=env.NavMenuHeight*xishu; const realstatusBarHeight=env.statusBarHeight*xishu; const realpageTitleHeight=env.pageTitleHeight*xishu; console.log('realDesignHeight:'+realDesignHeight+'realNavMenuHeight:'+realNavMenuHeight+'realstatusBarHeight:'+realstatusBarHeight+'realpageTitleHeight:'+realpageTitleHeight) return realDesignHeight-realNavMenuHeight-realstatusBarHeight-realpageTitleHeight; },

結(jié)束語

寫到最后，其實(shí)還有一個(gè)問題，關(guān)于設(shè)置了系統(tǒng)全面屏和非全面屏頁面設(shè)計(jì)高度變化的問題，有知道的小伙伴請(qǐng)?jiān)诹粞詤^(qū)寫一下，分享一下經(jīng)驗(yàn)，謝謝

關(guān)鍵詞：高度,設(shè)置

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉