w***@163.com
w***@163.com
  • 发布:2024-03-09 21:26
  • 更新:2024-10-22 16:24
  • 阅读:558

【报Bug】uni-app编译模式下,app端的nvue页面,使用plus.screen.lockOrientation('landscape-primary')设置横屏,退出后页面元素变大

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11 专业版/23H2/22635.3276

HBuilderX类型: 正式

HBuilderX版本号: 3.96

手机系统: Android

手机系统版本号: Android 10

手机厂商: OPPO

手机机型: R15

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: http://39.108.133.46:8888/down/Ul0HJwnb9011

操作步骤:

进入播放页面,点击播放器,调出播放器底部的控制栏。再点击播放器底部的最右侧的控制图标,切换到全屏(横屏)。等待控制栏消失后,点击播放区域,重新调起控制栏,点击左上角的返回图标,返回竖屏状态,静止几秒,等待控制栏消失。再点击播放区域,调起控制栏。

预期结果:

无论是横屏状态还是恢复到竖屏状态,控制图标都正常显示,大小一样。

实际结果:

横屏后,图标变小;恢复到竖屏时,图标变大

bug描述:

在vue项目中,使用nvue组件。nvue中使用的是原生视频播放器组件。在vue页面中使用如下代码实现横屏,并将nvue页面的原生组件全屏(动态设置播放器的宽高)

plus.navigator.setFullscreen(true); //隐藏状态栏    
plus.screen.lockOrientation('landscape-primary');

点击返回按钮,通过如下逻辑返回竖屏

plus.navigator.setFullscreen(false); //隐藏状态栏  
plus.screen.unlockOrientation()  
plus.screen.lockOrientation('portrait-primary');

截屏见附件。(编辑器按说明点图片右侧的“插入”无任何反应)
按图片名称说明:
1.正常竖屏
2.点击底部全屏图标后,横屏效果
3.步骤2,等待几秒,顶部的返回按钮和底部的操作栏自动隐藏,再次点击视频时的效果,此时图标变小了
4.点击左上角的返回按钮,返回竖屏时的ui(此时可以看到,播放器被缩小了)

  1. 等待几秒钟不做任何操作,播放器自动恢复到正常大小,但是底部操作栏的图标都变大了。
    说明: nvue页面和引用该nvue组件的页面都使用的是px作为样式宽高单位。并且在page.json中的globalStyle下已经设置了dynamicRpx=true
2024-03-09 21:26 负责人:无 分享
已邀请:
码奴是我

码奴是我 - 98it_boys

您好。您知道如何ios强制横屏吗

  • w***@163.com (作者)

    ios不知道呢,我这个app只在安卓上用。不好意思

    2024-03-14 20:27

泡椒

泡椒 - 一个菜鸟

您好 请问解决了吗

要回复问题请先登录注册