uniapp中设置地图组件的自适应高度

1、背景

在做app的项目中，有时候需要对不同手机设置相应的自适应高度，虽然对于宽度有‘rpx’的解决方案，但是高度却需要我们自己进行配置。

2、实例

js部分：

		data() {
			return {
				nowMapIndex:true,
				phoneHeight:'',//屏幕高
				phoneWidth:'',//屏幕宽
			}
		},	
		onReady(){
			// 计算屏幕高度 ，宽度
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					 _this.phoneHeight = res.windowHeight;
					 _this.phoneWidth = res.windowWidth
				}
			});
		},
		computed:{//计算
			nintyPercentScreenHeight(){//百分之九十的屏幕高
				if(this.phoneHeight!=='' && this.phoneWidth!==''){
					return 750/(this.phoneWidth)*(this.phoneHeight)*0.9+'rpx'
				}else{
					return '1250rpx'
				}
				
			},
			seventyPercentScreenHeight(){//百分之七十的屏幕高
				if(this.phoneHeight!=='' && this.phoneWidth!==''){
					return 750/(this.phoneWidth)*(this.phoneHeight)*0.7+'rpx'
				}else{
					return '1000rpx'
				}
				
			},
		},	

html部分：

<template>
	<div>
		<map
			:style="{height: nowMapIndex ? nintyPercentScreenHeight : seventyPercentScreenHeight,width:'750rpx'}"
		>
		</map>		
	</div>
</template>

3、小结

因为我这个项目的这个页面是nvue页面，所以不支持scss,要不然可以直接在onReady中就可以设置好需要设置的屏幕高度变量值，这里多了一个过程。