uni-app可视化窗口高度兼容

uni-app使用时因为不同的手机,操作系统(os,andriod,微信小程序),他们的可视化窗口的高度有所不同,此篇是兼容可视化窗口高度的一种方法


<script>
export default{
	data() {
		return {
        //内容快的高度值
        clientHeight: 0,
	},
    onReady() {
      uni.getSystemInfo({
        success: (res) => {
            //uni.upx2px(80)为顶部topBar的高度
          this.clientHeight = res.windowHeight -uni.upx2px(80)-this.getClientHeight()
        }
      })
    },
    methods:{
      //获取可视区高度【兼容】
      getClientHeight(){
        const res = uni.getSystemInfoSync()
        const system = res.platform
        if(system === 'os'){
          return 44+res.statusBarHeight
        }else if(system === 'android'){
          return 48+res.statusBarHeight
        }else{
          return 0
        }
      }
    }
}
</script>

详细内容请查询uni-app官网,uni.getSystemInfo()方法