微信小程序> 监测和设置微信小程序横竖屏转换

监测和设置微信小程序横竖屏转换

浏览量:5439 时间: 来源:冷子夜

在小程序的开发中,有时候需要横屏显示一些页面,不过微信官方并没有提供横屏功能,但提供了手机屏幕旋转的支持,所以可以利用这个来引导用户通过屏幕旋转看到更好的界面效果。
如果想要某个页面支持屏幕旋转,需要在此页面的 json文件中配置

"pageOrientation": "auto",

{  "navigationBarBackgroundColor": "#000000",  "navigationBarTextStyle": "white",  "navigationStyle": "custom",  "pageOrientation":"auto"}

然后如果手机屏幕旋转,页面会自动进行旋转。我们需要根据屏幕方向显示不同的内容,那如何判断当前屏幕的方向呢?可以在此页面的 js 文件中加入 onResize:function(res){} 方法来进行屏幕方向的监听,每次屏幕旋转时这个方法都会调用。

 

Page({  onResize:function(res) {    console.log('屏幕方向旋转',res)  }})


可以通过获取到的显示区域的宽度和高度来判断当前屏幕是横屏还是竖屏,然后显示不同的内容。注意,模拟器不会触发此方法,所以请使用真机调试。
 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎