uni-app 移动端高度自适应

uni-app宽度固定750rpx,一般都没问题
那么高度怎么自适应呢?
这里提供一种解决方案在App.vue的onLoad()里获取手机可用高度
如下代码

//App.vue
<script>
	export default {
		onLaunch: function() {
			if (process.env.NODE_ENV === 'development') {
				// baseUrl=""
				console.log('开发环境')
			} else {
				// baseUrl=""
				console.log('生产环境')
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success:(res)=>{
					console.log("手机可用高度:"+res.windowHeight*2+"rpx");
					this.$store.commit('set_window_height',res.windowHeight*2);
				}
			})
		},
		onHide: function() {
			console.log('App Hide');
		}
	};
</script>

获取后记得要*2(px转换成rpx),保存到仓库store里,或者保存在缓存里,使用时在view的:style里设定高度,如下图(我这里是保存在store的window_height属性的)

<view class="top_select" :style="{'width':$store.state.window_height*0.8+'rpx'}">
</view>

这样就可以设定为总高度的80%高了

你可能感兴趣的:(uniapp,前端)