小程序横屏竖屏切换监听

一、在需要切换的页面.json中配置代码

注：需要提前开启手机的屏幕旋转

{
  "usingComponents": {
      "nav-bar": "/packages/navTopBar",
      "nav-bg": "/packages/navBg/index"

  },
  "navigationBarTextStyle": "white",
  "disableScroll": true,
  "pageOrientation": "auto" //配置是否支持横屏切换
}

二、页面.js中监听

注：landscape代表横屏的参数，portrait代表竖屏。用来判断横屏时页面样式和结构变化

 // 屏幕旋转方法
 onResize:function(res) {
    console.log('屏幕方向旋转',res)
    if(res.deviceOrientation === "landscape"){  //portrait代表竖屏
      wx.showToast({
        title: '横屏',
        icon: 'none'
      })
      this.setData({
        is_landscape:true,
        pageTop:'40rpx',
      })
    }else{
      wx.showToast({
        title: '竖屏',
        icon: 'none'
      })
      thi