Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【harmony-hybrid】解决返回时上一个页面瞬间白屏的问题 #15576

Closed
wants to merge 1 commit into from

Conversation

heweishui
Copy link
Contributor

@heweishui heweishui commented Apr 23, 2024

这个 PR 做了什么? (简要描述所做更改)

解决返回时上一个页面瞬间白屏的问题

这个 PR 是什么类型? (至少选择一个)

  • 错误修复(Bugfix) issue: fix #
  • 新功能(Feature)
  • 代码重构(Refactor)
  • TypeScript 类型定义修改(Typings)
  • 文档修改(Docs)
  • 代码风格更新(Code style update)
  • 其他,请描述(Other, please describe):

这个 PR 涉及以下平台:

  • 所有小程序
  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 字节跳动小程序
  • QQ 轻应用
  • 京东小程序
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)
  • 鸿蒙(harmony)

Copy link

taro-bot2 bot commented Apr 23, 2024

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献!🌷🌷🌷

一般 PR 会在一到两周内进行 review,成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间,所以请遵循以下规范,协助我们提高 review 效率🙏🙏🙏

  1. 详细介绍 PR 的背景(非常重要,例如解决了什么问题,该问题如何复现等)
  2. 确保 CI 顺利运行。
  3. 最好能提供对应的测试用例。

为了更好地进行沟通,请加入 Taro 开发者微信群:

1 similar comment
Copy link

taro-bot2 bot commented Apr 23, 2024

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献!🌷🌷🌷

一般 PR 会在一到两周内进行 review,成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间,所以请遵循以下规范,协助我们提高 review 效率🙏🙏🙏

  1. 详细介绍 PR 的背景(非常重要,例如解决了什么问题,该问题如何复现等)
  2. 确保 CI 顺利运行。
  3. 最好能提供对应的测试用例。

为了更好地进行沟通,请加入 Taro 开发者微信群:

@heweishui heweishui changed the title fix: 解决打开第1个页面时在鸿蒙平台动画不能真正的停止的问题 fix: 解决返回时上一个页面瞬间白屏的问题 Apr 23, 2024
@heweishui heweishui changed the title fix: 解决返回时上一个页面瞬间白屏的问题 【harmony-hybrid】解决返回时上一个页面瞬间白屏的问题 Apr 23, 2024
@ZakaryCode ZakaryCode added the T-harmony_hybrid Target - 编译到 Harmony (Hybird 模式) label May 2, 2024
@ZEJIA-LIU
Copy link
Contributor

请简单描述一下复现路径和可复现demo,方便我进行验证

This was referenced May 4, 2024
@kongxiaojun
Copy link
Contributor

说明:
willshow是为了解决返回白屏问题,路由跳转的时候会把上一页设置为display hidden,返回上一页的动画执行结束才会把hidden去掉。willshow的时机是在返回动画执行之前调用,提前把hidden去掉
复现步骤:
任意一个包含多page的sample,使用H5模式编译,从A页跳转到B页后再点击返回按钮,可以观察到返回动画执行过程中A页面未显示,只有在返回动画执行完成后A页面才会显示出来。如果不明显可以把A页面的背景设置为深色,可以明显的看到白屏效果。

@ZEJIA-LIU ZEJIA-LIU added this to the 3.6.29 milestone May 6, 2024
@ZEJIA-LIU
Copy link
Contributor

说明: willshow是为了解决返回白屏问题,路由跳转的时候会把上一页设置为display hidden,返回上一页的动画执行结束才会把hidden去掉。willshow的时机是在返回动画执行之前调用,提前把hidden去掉 复现步骤: 任意一个包含多page的sample,使用H5模式编译,从A页跳转到B页后再点击返回按钮,可以观察到返回动画执行过程中A页面未显示,只有在返回动画执行完成后A页面才会显示出来。如果不明显可以把A页面的背景设置为深色,可以明显的看到白屏效果。

这个问题可以通过css来实现即可。目前在路由这一块的逻辑已经足够复杂,再添加生命周期 willshow 感觉有点多余,因为他做的事情其实是和show相似的。
建议在 packages/taro-router/src/style.ts 这个文件里面,修改.taro_page_shade相关的css为:

  .taro_page_shade:has(+.taro_page_stationed),
  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
    display: none;
  }

@ZEJIA-LIU
Copy link
Contributor

.taro_page_shade:has(+.taro_page_stationed),
.taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
display: none;
}

我又想了一下,当页面存在tab页面的时候,页面上的dom排序和路由的history排序并不一致,因为tab页面并不会被删除,所以应该没办法使用css来解决

@ZEJIA-LIU
Copy link
Contributor

说明: willshow是为了解决返回白屏问题,路由跳转的时候会把上一页设置为display hidden,返回上一页的动画执行结束才会把hidden去掉。willshow的时机是在返回动画执行之前调用,提前把hidden去掉 复现步骤: 任意一个包含多page的sample,使用H5模式编译,从A页跳转到B页后再点击返回按钮,可以观察到返回动画执行过程中A页面未显示,只有在返回动画执行完成后A页面才会显示出来。如果不明显可以把A页面的背景设置为深色,可以明显的看到白屏效果。

当多个页面存在,连续多次进行返回的时候,这么改也解决不了问题,你不如提一个pr把,这个问题修改起来有点复杂

@ZEJIA-LIU
Copy link
Contributor

该问题已解决,
可参考pr #15659
跟周五版本

@ZEJIA-LIU ZEJIA-LIU marked this pull request as draft May 7, 2024 07:26
@ZEJIA-LIU ZEJIA-LIU removed this from the 3.6.29 milestone May 7, 2024
@heweishui heweishui closed this May 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
T-harmony_hybrid Target - 编译到 Harmony (Hybird 模式)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants