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%高了