uni-app监听横竖屏切换不同样式

uni-app监听横竖屏切换不同样式

1.在data中定义变量 isLandScape

	data() {
		return {
			isLandScape: false
		}
	}

2.监听窗口尺寸变化改变isLandScape的值

// 监听尺寸变化
	onResize(){
		let _this = this
		uni.getSystemInfo({  
			success: function(res) {  
				if (res.windowWidth > res.windowHeight) {  
				   // 横屏
					_this.isLandScape = true
				} else {  
				   // 竖屏
					_this.isLandScape = false
				}  
			}  
		})
	},

3.准备不同的样式

	.chart_portrait{
			height: 36vh;
		}
	.chart_lanscape{
			height: 82vh;
	}

4.判断添加不同的样式

<view :class="{'chart_portrait': !isLandScape, 'chart_lanscape': isLandScape}" >

方法虽然略显笨拙但有用~~哈哈哈欢迎补充