システム情報 (高さ、幅) の使用法とパッケージ化を取得するための uni-app API

uni-app は、システム情報を取得するための 2 つの非同期 (uni.getSystemInfo) および同期 (uni.getSystemInfoSync) API を提供します。

uniapp公式Webサイトの解決アドレス

uni.getシステム情報

システム情報を非同期で取得する

パラメータ名	タイプ	必要	説明する
成功	関数	はい	インターフェイス呼び出しが成功した場合のコールバック
失敗	関数	いいえ	インターフェース呼び出し失敗時のコールバック関数
完了	関数	いいえ	インターフェイス呼び出しの終了時のコールバック関数 (呼び出しは成功または失敗します)

success は他のパラメータを返します (詳細については公式 Web サイトを参照してください)

知らせ：

• 画面の高さ = ネイティブの NavigationBar の高さ (ステータス バーの高さを含む) + 使用可能なウィンドウの高さ + ネイティブの TabBar の高さ
• windowHeight には NavigationBar と TabBar の高さは含まれません
• Web 側では、windowTop は NavigationBar の高さに等しく、windowBottom は TabBar の高さに等しい
• アプリ側では、windowTop は透明状態の NavigationBar の高さに等しく、windowBottom は透明状態の TabBar の高さに等しい
• 関連性の高い情報は onReady で取得する必要があります。入手するには早すぎます。高さと幅の単位はpxです

uni.getSystemInfo({
    
    
	success: function(res) {
    
    
		// *****高度宽度的单位都是px 
		console.log(res.screenHeight); // 屏幕高度，包含导航栏
		console.log(res.windowHeight); // 能够使用的窗口高度，不包含导航栏
		console.log(res.screenWidth); // 屏幕宽度
		console.log(res.windowWidth); //  能够使用的窗口宽度
		console.log("windowHeight：",res.windowHeight)	
		let windowHeight = res.windowHeight;
	}
})

uni.getSystemInfoSync

システム情報を取得するための同期インターフェイス。呼び出しパラメータと戻り値は上記の getSystemInfo と同じです。

uni.getSystemInfoSync({
    
    
	success: function(res) {
    
    
		// *****高度宽度的单位都是px 
		console.log(res.screenHeight); // 屏幕高度，包含导航栏
		console.log(res.windowHeight); // 能够使用的窗口高度，不包含导航栏
		console.log(res.screenWidth); // 屏幕宽度
		console.log(res.windowWidth); //  能够使用的窗口宽度
		console.log("windowHeight：",res.windowHeight)	
		let windowHeight = res.windowHeight;
	}
})

アクティブ領域の高さを取得するためのメソッドのカプセル化

/**
 * 获取活动区域高度
 * @param { nodeName } 节点名字
 * @param { nodeHeight } 节点高度
 * @param { nodeMPHeight } 节点margin 和 padding 的高度
 * 
 */
function getHeight(nodeName, nodeHeight = 0,nodeMPHeight = 0) {
    
    
	let pageHeight = uni.getSystemInfoSync().windowHeight; // 获取当前页面的高度
	console.log("pageHeight: ",pageHeight)
	// 获取结节高度方法
	//  #ifdef H5
	const query = uni.createSelectorQuery();
	//  #endif
	//  #ifdef APP
	const query = uni.createSelectorQuery().in(this)
	//  #endif
	// 获取当前结节高度值
	let nHeight = nodeHeight
	query
		.select(nodeName)
		.boundingClientRect(data => {
    
    
			console.log("data.height: ",data.height)
			nHeight = data.height
		})
		.exec();
	let nowHeight =  pageHeight - nHeight - nodeMPHeight
	console.log("nowHeight",nowHeight)
	return nowHeight + 'px'
}

2. 调用
/**
 * 获取滚动高度--高度相关信息，要放在 onReady 里获取，太早取不到；
 * 单位都是px
 * 将rpx单位值转换成px
 * uni.upx2px(600) + 'px';
 * */			 
this.h = this.getHeight('#content-head', 0, uni.upx2px(20));