收藏
回答

小程序页面的fixed布局在华为P30上会错乱(横屏返回竖屏后出现)?

如题描述,在一个页面内,底部fixed布局定位了一组操作按钮,在跳转到横屏页面完成流程后,返回到当前竖屏页面,会发现底部那组按钮变得很长,超出屏幕范围了,fixed的模态框demo也会变宽(原样式未90%宽度),只能显示一部分

未跳转前,正常样式:

跳转到横屏页面后,返回到竖屏页面,样式错乱(用户手机视频截图):


同样的还有一个模态输入框弹窗样式也出现问题,正常情况下:

用户出现问题的模态框样式:


wxml:

      
        驳回
      
      
        通过
      
    

wxss:

.form_sys{
  /* margin-bottom: 30rpx; */
  position: fixed;
  left30rpx;
  right30rpx;
  margin: auto;
  bottom50rpx;
  z-index8;
}
.form_sys button{
  width100% !important;
  height90rpx;
  font-size32rpx;
  font-weight500;
  /* color: #FFFFFF; */
}
.form_sys span{
  width45%;
}


补充一条:用户反馈大半年前没有这种情况。这半年来,页面样式并未做调整,只是因为版本迭代,基础库有相应升级,目前调试基础库版本为3.7.3。不知道这个有没有影响。

现在的解决尝试(请教DS给出的方案):

1.给原竖屏页面json添加pageOrientation:portrait;2.在原竖屏页面onshow生命周期内增加:wx.onWindowResize((res) => {

      if (res.deviceOrientation === 'portrait'{

        this.setData({ isPortrait: true });

        // 触发重新布局

        this.handleLayout();

      }

    })

但是由于没有发布正式补丁,本地也无法重现,所以也不知道这两个方案有没有用处。特来请教一下有没有同样遇到这个问题,是如何解决的


最后一次编辑于  05-13
回答关注问题邀请回答
收藏
登录 后发表内容