如何在uniapp中獲取可視區(qū)域的高度(uni.getSystemInfo)
前言
在實際開發(fā)中我們會遇到不確定高度的情況，那么在uniapp中我們如何獲取區(qū)域的高度吶？一起來看看吧
使用到的：
uni-app提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個API獲取系統信息
uni.getSystemInfo(OBJECT)
異步獲取系統信息
OBJECT 參數說明：
參數名 | 類型 | 必填 | 說明 |
success | Function | 是 | 接口調用成功的回調 |
fail | Function | 否 | 接口調用失敗的回調函數 |
complete | Function | 否 | 接口調用結束的回調函數（調用成功、失敗都會執(zhí)行） |
success 返回參數說明,目前需要使用到的：
參數 | 說明 |
windowHeight | 可使用窗口高度 |
statusBarHeight | 手機狀態(tài)欄的高度 |
一、分析uniapp的可視區(qū)域
是哪塊哪？其實和我們想的有些出入
其實就是藍色區(qū)域=紅色區(qū)域-綠色區(qū)域
代碼：
getClineHeight(){
const res = uni.getSystemInfo({
success:(res=>{
this.clientHeight = res.windowHeight-uni.upx2px(80)
})
});
},
tip：注意，在我們的微信小程序中是可以正確顯示的，但是在ios中是有問題的
二、如何在小程序和ios中都能正確顯示
我們只需要獲取系統信息中的platform信息，判斷是ios或者android或者其他
tip注意點：
1.注意這里的單位是pxname我們需要將代碼中導航欄寫的css的80rpx轉換為40px，使用upx2px直接可以進行轉換
2.ios本身有44的高度，Android是48
代碼：
getBarHeight(){
const res = uni.getSystemInfoSync()
if(res.platform==='ios'){
return 44+res.statusBarHeight
}else if(res.platform==='android'){
return 48+res.statusBarHeight
}else{
return 0;
}
},
//獲取可視區(qū)域高度
getClineHeight(){
const res = uni.getSystemInfo({
success:(res=>{
this.clientHeight = res.windowHeight-uni.upx2px(80)-this.getBarHeight();
})
});
},三、減掉的部分
白色部分=綠色部分（windowHeight）-藍色部分（ios44，Android48）-橙色部分（getSystemInfoSync中的statusBarHeight）-黑色部分（你設置的高度或者使用組件的高度，注意單位是px）
windowHeight | 可使用窗口高度 |
windowHeight | 可使用窗口高度 |
減去
代碼：
getBarHeight(){
const res = uni.getSystemInfoSync()
if(res.platform==='ios'){
return 44+res.statusBarHeight
}else if(res.platform==='android'){
return 48+res.statusBarHeight
}else{
return 0;
}
},
//獲取可視區(qū)域高度
getClineHeight(){
const res = uni.getSystemInfo({
success:(res=>{
this.clientHeight = res.windowHeight-uni.upx2px(80)-this.getBarHeight();
})
});
},總結
到此這篇關于如何在uniapp中獲取可視區(qū)域的高度(uni.getSystemInfo)的文章就介紹到這了,更多相關uniapp獲取可視區(qū)域的高度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序自定義彈出模態(tài)框禁止底部滾動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
JavaScript中，每當創(chuàng)建一個對象，都會給這個對象提供一個內置對象 [[Prototype]] 。這個對象就是原型對象，[[Prototype]] 的層層嵌套就形成了原型鏈。本文將詳細講解如何用原型鏈的方式實現一個 JS 繼承，感興趣的可以了解下2022-04-04
這篇文章主要給大家介紹了關于JavaScript中垃圾回收與內存泄漏的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了ES6 Promise對象的應用,結合實例形式分析了Promise對象原理與異步處理相關操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JavaScript實現計算器，下面文章實現計算器作為學習期間的一個小練習，需要的小伙伴可以參考一下，希望對你有所幫助2022-01-01
JAVASCRIPT中keycode總結，方便需要控制keycode的朋友2009-02-02
JavaScript 中的相等操作符詳解，包括 [] == []、[] == ![]、{} == !{}幾個操作符,需要的朋友可以參考下2019-12-12
點亮星星評分后，點擊按鈕，立即獲得分數參數值，方便不想使用ajax傳參的朋友2014-07-07
這篇文章主要為大家詳細介紹了標準的js無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了ajax分頁效果的實現方法，結合bootstrap模態(tài)框使用 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01