监听微信小程序是否横屏/竖屏

最新推荐文章于 2023-10-18 10:12:48 发布

前端-文龙刚

最新推荐文章于 2023-10-18 10:12:48 发布

阅读量622

点赞数

分类专栏：小程序文章标签：前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/130250040

版权

小程序专栏收录该内容

82 篇文章 0 订阅

订阅专栏

该文章介绍了如何在JSON配置中设置`pageOrientation`为`auto`以开启屏幕自动旋转功能，并通过微信小程序的`wx.startDeviceMotionListening`监听设备的横屏和竖屏状态。当设备倾斜角度（gamma值）超过阈值时，设置页面为横屏模式，否则恢复为竖屏。监听到设备方向变化后，会调用`wx.offDeviceMotionChange`取消当前的监听事件。

摘要由CSDN通过智能技术生成

1、先在json文件中设置："pageOrientation": "auto" 开启屏幕可旋转

2、监听横屏 / 竖屏方法：

onResize:function(res) {
		var that = this
		wx.startDeviceMotionListening({
			success:function(e){
				wx.onDeviceMotionChange(function(resodm){
					console.log(resodm)
					if (resodm.gamma < -40 || resodm.gamma > 40){
						that.setData({
							isLandscape:true
						})
						//取消监听设备方向变化事件
            wx.offDeviceMotionChange()
					}else{
						that.setData({
							isLandscape:false
						})
						wx.offDeviceMotionChange()
					}
				})
			}
			})
	},

关注博主即可阅读全文