uniapp 页面旋转后，返回上一页，页面变形的解决办法

最新推荐文章于 2024-08-26 07:28:57 发布
最新推荐文章于 2024-08-26 07:28:57 发布
阅读量579 收藏
点赞数
分类专栏： uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38839887/article/details/128973350
版权

进入横屏页面，返回上一页A的上一页B，再由B进入A,

uni-app -移动端 - 启动后全局横屏与单个页面横屏以及解决ios横屏失效
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
10-11 5187
最常见的横屏场景是视频播放应用。在竖屏模式下，用户通常只能看到视频的一部分，而在横屏模式下，用户可以利用更宽的屏幕空间来观看完整的视频内容。
uniapp某个页面横竖屏切换的坑，横竖屏切换页面元素错乱
weixin_43242112的博客
11-03 4452
问题出现场景 最近在使用uniapp做一个App的开发，大概场景：App仅有一个页面需横屏，退出该页面时切换为竖屏。以下复现问题场景。 1、在manifest.json中配置orientation节点 /* 重力感应、横竖屏配置 */ "orientation" : [ //竖屏正方向 "portrait-primary", //竖屏反方向 "portrait-secondary", //横屏正方向 "landscape-primary", //横屏反方向 "landscape-second
uni小程序判断手机是否开启自动旋转，横屏给出提示（微信小程序类似）
fuafua_0507的博客
01-09 1059
全局在globalStyle添加"pageOrientation": "auto"单个页面在单个页面的配置style下添加如下。在pages. json中。单个页面vue中添加如下。
uni-app解决跳转页面引起的页面压缩变形
qq_27161847的博客
03-16 916
uni-app解决跳转页面引起的页面压缩变形 跳转页面造成页面半个屏幕压缩变形 input输入框键盘弹起 // 延500毫秒关闭键盘跳转页面 setTimeout(item => { uni.hideKeyboard() },500)
uni-app为什么返回的不是上个页面了？
南漂一枚
01-21 1088
开发中发现，我从任务详情返回首页，居然自动返回到了上上个页面。这主要是因为back按钮调用了一次返回。然后在onUnload生命周期中，又执行了一次返回。所以导致了2次返回。
UNI-APP，设置某个页面横屏后，恢复竖屏，返回再次进入其他页面时，页面内容放大错乱
沧海龙腾LV的博客
03-02 3618
实现横竖屏方法： portrait-primary: 竖屏正方向； portrait-secondary: 竖屏反方向，屏幕正方向按顺时针旋转180°； landscape-primary: 横屏正方向，屏幕正方向按顺时针旋转90°； landscape-secondary: 横屏方向，屏幕正方向按顺时针旋转270°； portrait: 竖屏正方向或反方向，根据设备重力感应器自动调整； landscape: 横屏正方向或反方向，根据设备重力感应器自动调整； 在需要横屏的页面添加如下代码，即可实现横竖
uniapp视频横屏，物理返回键返回上一页
空&白的博客
03-13 956
uniapp视频横屏，物理返回键返回上一页
uniapp全局配置固定横屏打包后出现样式问题的解决
行如逆水行舟，不进则退
08-12 580
uniapp全局配置固定横屏打包后首页出现样式比例不对，页面跳转后恢复。去掉pages.json文件中的固定横屏配置，去页面添加手动横屏。//解除屏幕方向的锁定，但是不一定是竖屏；大致是资源加载顺序的问题。
前端CSS：CSS变形transform的所有属性
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-26 1119
CSS变形允许元素在二维或三维空间中进行位置、大小和形状的变换。它通过修改元素的坐标系来实现这些变换，可以应用于任何类型的元素，无论是块级元素还是内联元素。
canvas和纯 CSS 实现波浪进度图
12-21
在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形； 上面也演示到了，多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。 一个圆形的进度和波浪状态的滑动的新DEMO...
uniapp无法返回上一页_uniapp带参返回上一页功能实现
weixin_39949673的博客
01-30 2189
在uniapp开发过程中经常会遇到这种情况：列表页面A点击item进入详情页B，详情页B进行操作后返回A列表页并从A列表移除刚才操作的item，或者修改item的值，又或者返回之后直接刷新。由于uniapp的uni.navigateBack没有提供带参的返回方法，所以我们只能另辟蹊径。这里我要实现的场景是A列表点击item跳转B页面，B页面提交表单后，点击完成按钮，返回A列表页，并刷新当前列表组件...
uniappH5页面 样式错乱
怪咖`Blog
03-19 1755
今天在编写代码的过程中遇到一个小问题，自己也踩坑了，所以将经验分享出来，希望能帮助到你。
uniapp启动页拉伸
D丶bird
12-30 3626
直接正文 启动页拉伸目前我这的解决方案为图片换成 1080_2340.9.png 的图。 首先你要有这个png的图 然后去这个网站做.9.png的图 传送门 那个线拉到最边上（上下左右四条线），不然会报打包错误 下载 配置启动页加载路径 app-plus.distribute.splashscreen.androidTranslucent: true; 这个配置是安卓打开app会有两次的启动页展示，第一次有底部原生按钮组（背景透明），第二次有底部原生按钮组（背景不透明）。这个配置开启
uni-app小程序加载页面出现图片拉长再变正常的原因
weixin_45932157的博客
04-19 2089
在使用uniapp写微信小程序的页面样式的时候，你会发现一个现象就是加载图片的时候回先变长然后在正常显示，在pc端和app端没有问题。 这个原因是因为图片高度是自适应的，没有给固定高度。 解决方案就是给父元素固定宽高，图片设置宽高百分之百或者给图片加一个固定的宽高就解决了 ...
uniapp使用横竖屏功能，遇到的问题
老马快跑的小知识库
12-09 948
使用横竖屏功能，遇到的问题
uniapp 横竖屏切换 返回 再次进入 页面内容样式错乱
小白前端
04-09 2157
今天做一个table需要展示的内容比较多，只能使用横屏的方式去展示，能解决横竖屏切换的问题，但是返回上一页再次点击进去，页面内容的样式全部变大，后来借鉴其他开发人员的帖子解决了问题，这里吧代码粘出来，记录下： 1.在需要切换横竖屏的页面，onLoad 和 onUnload 这两个页面生命周期中添加代码分别为： onLoad() { // #ifdef APP-PLUS uni.showLoading({ title:"加载中..."
uniapp横屏竖屏切换，退出首次再进入其它界面，元素样式放大问题解决
qq_55460954的博客
02-08 2724
问题：从竖屏页面1进入竖屏页面2，再进入横屏，再返回，再返回从新回到竖屏页面1，再次进入竖屏页面2，发现竖屏页面2的所有图片字体都被放大了。再返回竖屏1，再进入竖屏2，一切又恢复正常。在横屏页面返回时，监听onBackPress()使其跳转到一个空白的vue页面，这个空白的vue页面在跳转到自己想去的页面。解决：其实就是横竖屏切换之后的 第一个加载的页面样式会错乱，所以需要一个空白的页面来承载这个样式错乱的问题。
uni-app微信小程序页面滑动，副标题固定到顶部
qq_31629679的博客
12-06 1235
1、首先加载时通过uni.createSelectorQuery的方法获取需要被锁定在顶部样式距离顶部的距离2、利用页面滚动的onPageScroll函数获取页面滑动的距离3、当滑动的距离大于（锁定框）初始化时距离顶部的高度时，修改样式为“position: fixed;”固定定位样式4、（个人处理方式可忽略）为了防止样式变化后页面闪动，加一个和头部相同样式用于缓冲。
【uniapp】当图片固定宽高后比例失衡
weixin_58387292的博客
11-10 1306
保持纵横比缩放图片
uniapp表单提交成功后返回上一页面
最新发布
04-26
### UniApp 表单提交后返回上一页的实现方法 在 UniApp 中，可以通过多种方式实现在表单提交成功后返回上一页面的功能。以下是几种常见的解决方案： #### 方法一：使用 `uni.navigateBack` 结合延时器 如果希望在表单提交完成后延迟一段时间再返回上一页，可以结合 `setTimeout` 和 `uni.navigateBack` 来实现。 ```javascript // 假设这是表单提交成功的回调函数 this.$AlicloudApi.setDeviceProperty(params).then(res => { console.log(res.result); uni.showLoading({ title: '数据更新中' }); setTimeout(() => { uni.hideLoading(); uni.navigateBack(); // 返回上一页 }, 1000); // 设置延时时间（单位毫秒） }); ``` 这种方法适用于简单的场景，不需要额外操作上一页的状态[^4]。 --- #### 方法二：通过修改上一页面的数据 可以在当前页获取页面栈中的上一页面实例，并直接修改其数据或调用其方法。这种方式适合需要同步更新上一页面状态的情况。 ```javascript chooseAddress(item) { // item 是需要传递的地址对象数据 let pages = getCurrentPages(); // 获取页面栈的实例 let prePage = pages[pages.length - 2]; // 上一页面 // 修改上一页面的数据 prePage.$vm.address = item; // 或者调用上一页面的方法 // prePage.$vm.editAddress(item); uni.navigateBack(); // 返回上一页 } ``` 该方法可以直接影响上一页面的状态，而无需依赖页面生命周期事件[^1]。 --- #### 方法三：利用 `onLoad` 和 `onShow` 刷新机制 由于 UniApp 的页面生命周期特性，当从子页面返回父页面时，不会重新触发 `onLoad` 方法，而是会触发 `onShow` 方法。因此，可以在上一页面的 `onShow` 方法中刷新数据。 ```javascript // 上一页面 (假设为 A 页面) export default { data() { return { addressList: [] }; }, onShow() { this.getAddressList(); // 调用获取地址列表的方法 }, methods: { getAddressList() { // 这里执行获取最新数据的操作 } } }; ``` 这样即使不主动通知上一页面刷新，也可以通过监听 `onShow` 自动完成数据更新[^2]。 --- #### 方法四：强制重载上一页面 如果需要完全刷新上一页面，可以使用 `uni.redirectTo` 或 `uni.reLaunch` 替代 `uni.navigateBack`。需要注意的是，这会导致整个页面被销毁并重建。 ```javascript this.$AlicloudApi.setDeviceProperty(params).then(res => { console.log(res.result); uni.showLoading({ title: '数据更新中' }); setTimeout(() => { uni.hideLoading(); uni.reLaunch({ url: '/pages/previousPage/previousPage' // 替换为目标页面路径 }); }, 1000); }); ``` 此方法虽然简单粗暴，但在某些复杂场景下可能会影响用户体验[^4]。 --- #### 方法五：通过回调函数刷新上一页面 类似于方法二，但更加灵活。可以在返回之前显式调用上一页面的方法来刷新数据。 ```javascript let pages = getCurrentPages(); // 当前页面 let beforePage = pages[pages.length - 2]; // 上一页面 uni.navigateBack({ success: function () { beforePage.$vm.refreshData(); // 调用上一页面的 refreshData 方法 } }); // 上一页面需定义对应的 refreshData 方法 methods: { refreshData() { this.getDataFromServer(); // 更新数据逻辑 } } ``` 这种方法能够精确控制何时以及如何刷新上一页面的数据[^3]。 --- ### 总结 以上提供了五种不同的方案供开发者选择，具体采用哪种取决于实际需求： - 如果仅需返回而不涉及数据交互，则推荐 **方法一**； - 若需要实时更新上一页面数据，可选用 **方法二** 或 **方法五**； - 对于自动化的刷新需求，建议基于 **方法三** 完成； - 需要彻底刷新页面的情况下适用 **方法四**。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值