快捷搜索: 王者荣耀 脱发

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

🌳🌳🌳个人博客: 🌲🌲🌲

"pageOrientation": "auto",

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

}

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

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

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

经验分享 程序员 微信小程序 职场和发展