首页 > 其他分享 >uniapp app横屏竖屏问题导致样式紊乱

uniapp app横屏竖屏问题导致样式紊乱

时间:2023-11-02 19:55:45浏览次数:35  
标签:uniapp 样式 app 竖屏 横屏 plus 页面

最近做了一个点击签名然后要让app自动横屏的功能,此功能难点在于退出横屏的时候,会导致竖屏的页面紊乱。

首先如果要让app横屏,要先在manifest.json的源码视图app-plus里添加"flexible": true,表示app可以横竖切换

然后在想要横屏的页面里加上

onShow() {
            uni.showLoading({
                title: "加载中..."
            })
            setTimeout(() => {
                plus.screen.unlockOrientation();
                plus.screen.lockOrientation('landscape-primary');
                uni.hideLoading();
            }, 1200)
        },
        //页面卸载时切换为竖屏配置
        onUnload() {
            plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
        },

 

此段代码,此时进入此页面就会横屏离开就会变成竖屏

写此功能时发现有bug,当时的想法是在a(竖屏)页面跳转到b(横屏)页面,在跳转之前就让屏幕横过来,然后b跳a的时候再竖过来,

但是如果这么书写将会导致竖屏的页面样式紊乱,看官方文档和大家的评论发现,要使用这种写法需页面样式单位都是由px构成,rpx和upx均会导致样式紊乱。

最后我使用了以上写法,发现只要是在一个页面横屏,离开时在这个页面竖屏,那么其他页面将不会受到影响。

标签:uniapp,样式,app,竖屏,横屏,plus,页面
From: https://www.cnblogs.com/prince11/p/17806160.html

相关文章

  • 2023年APP备案操作教程 阿里云APP备案试列 APP公钥sha1签名获取方法
    ​ 2023年APP备案操作教程阿里云APP备案试列APP公钥sha1签名获取方法阿里云新增APP备案操作教程西部数码、腾讯云、新网、等等其他域名备案信息系统操作类似;核心要点:A,域名之前是哪里备案的,APP备案就到哪里去做,方便简单;B,APP备案核心预存信息为APP包名、MD5指纹(安卓)、sha1签名......
  • uniapp-ucloud 数据库里面添加记录
    要保持本地跟云端的表一致。同步。还有设置权限constdb=uniCloud.database()constjiemengCollection=db.collection('jiemeng') for(constrowofdata){ console.log(row) try{ jiemengCollection.add(row) }catch(e){ ......
  • C# WinFrom Application下的方法以及用法
    https://blog.csdn.net/weixin_44867439/article/details/132792736https://zhidao.baidu.com/question/177942555374414204.htmlApplication.Exit():用于退出应用程序。它会触发FormClosing事件,并允许窗体执行清理操作。一般来说,Application.Exit用于正常关闭应用程序。Applic......
  • 数据分析和用户个性化体验:开发同城外卖APP的技术解决方案
    在数字化时代,外卖服务已经成为人们日常生活中不可或缺的一部分。无论是忙碌的白领、学生,还是家庭主妇,都倚赖同城外卖APP来方便地满足他们的饥饿需求。然而,随着竞争的激烈,外卖APP必须不断改进,以满足用户的期望,其中数据分析和用户个性化体验变得至关重要。一、数据分析的重要性1.1了......
  • uniapp 动态修改顶部导航栏右侧按钮 titleNView(APP-PLUS、H5)
    1<script>2exportdefault{3onReady(){4//已渲染5varpages=getCurrentPages();6varpage=pages[pages.length-1];78//#ifdefH59document.querySelector('.uni-page-head-ft.uni-......
  • 利用云计算和微服务架构开发可扩展的同城外卖APP
    如今,同城外卖APP已经成为了人们点餐的主要方式之一。然而,要构建一款成功的同城外卖APP,不仅需要满足用户的需求,还需要具备可扩展性,以适应快速增长的用户和订单量。一、了解同城外卖APP的需求在着手开发同城外卖APP之前,我们需要深入了解用户和业务需求。这包括用户希望能够浏览菜单、......
  • 个人理财APP-计算机毕业设计源码+LW文档
    安卓框架:uniapp安卓开发软件:HBuilderX开发模式:混合开发摘 要个人理财APP设计的目的是为用户提供对活动信息和提醒信息管理等方面的平台。与PC端应用程序相比,个人理财的设计旨在为用户提供一个个人理财信息的管理。用户可以通过APP及时收入信息和支出信息,并对提醒消息进行查......
  • Linux PAM和AppArmor
    PAM介绍PAM全称叫作PluggableAuthenticationModules,译为可插拔验证模块。1995年起源于sun公司,PAM是一个框架,通过PAM框架提供的接口,应用程序可以不关心基层具体的实现过程,直接调用接口实现身份验证功能。PAM还有一个功能就是在用户空间就是先对用户的资源进行限制。PAM不是Lin......
  • .NET6 配置 AutoMapper 与 AutoFac
    AutoMapper 概述1、什么是AutoMapper简单来说,AutoMapper就是一个用C#语言开发的一个轻量的处理一个实体对象到另外一个实体对象映射关系的组件库 官网地址:AutoMapper 文档地址:AutoMapper—AutoMapperdocumentation 2、为什么要用AutoMapper层与层之间的数据转换......
  • uniapp 打包缺陷
    uniapp打包时候会把所有用到的公共组件和公共封装打包到一起,在首页直接加载,这样会严重影响首屏的显示速度目前没有找到好的最小化分离首屏依赖的打包方式考虑可行的方案1.写一个webpack插件,通过分析指定模块的依赖,将模块和模块依赖分别打包2.深入webpack配置,看......