taro
taro copied to clipboard
NervJS
【harmony-hybrid】解决返回时上一个页面瞬间白屏的问题
这个 PR 做了什么? (简要描述所做更改)
解决返回时上一个页面瞬间白屏的问题
这个 PR 是什么类型? (至少选择一个)
- [x] 错误修复(Bugfix) issue: fix #
- [ ] 新功能(Feature)
- [ ] 代码重构(Refactor)
- [ ] TypeScript 类型定义修改(Typings)
- [ ] 文档修改(Docs)
- [ ] 代码风格更新(Code style update)
- [ ] 其他，请描述(Other, please describe):
这个 PR 涉及以下平台:
- [ ] 所有小程序
- [ ] 微信小程序
- [ ] 支付宝小程序
- [ ] 百度小程序
- [ ] 字节跳动小程序
- [ ] QQ 轻应用
- [ ] 京东小程序
- [ ] 快应用平台（QuickApp）
- [ ] Web 平台（H5）
- [ ] 移动端（React-Native）
- [ ] 鸿蒙（harmony）
欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷
一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。
Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏
- 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
- 确保 CI 顺利运行。
- 最好能提供对应的测试用例。
为了更好地进行沟通，请加入 Taro 开发者微信群：
![taro-bot2[bot] avatar](https://avatars.githubusercontent.com/in/71619?v=4 "Published by a pub.dev verified publisher"){kind=small}
欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献！🌷🌷🌷
一般 PR 会在一到两周内进行 review，成功合入后会随下一个版本进行发布。
Review 需要耗费大量时间，所以请遵循以下规范，协助我们提高 review 效率🙏🙏🙏
- 详细介绍 PR 的背景（非常重要，例如解决了什么问题，该问题如何复现等）
- 确保 CI 顺利运行。
- 最好能提供对应的测试用例。
为了更好地进行沟通，请加入 Taro 开发者微信群：
说明： willshow是为了解决返回白屏问题，路由跳转的时候会把上一页设置为display hidden，返回上一页的动画执行结束才会把hidden去掉。willshow的时机是在返回动画执行之前调用，提前把hidden去掉 复现步骤： 任意一个包含多page的sample，使用H5模式编译，从A页跳转到B页后再点击返回按钮，可以观察到返回动画执行过程中A页面未显示，只有在返回动画执行完成后A页面才会显示出来。如果不明显可以把A页面的背景设置为深色，可以明显的看到白屏效果。
说明： 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;
}
.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来解决
说明： willshow是为了解决返回白屏问题，路由跳转的时候会把上一页设置为display hidden，返回上一页的动画执行结束才会把hidden去掉。willshow的时机是在返回动画执行之前调用，提前把hidden去掉 复现步骤： 任意一个包含多page的sample，使用H5模式编译，从A页跳转到B页后再点击返回按钮，可以观察到返回动画执行过程中A页面未显示，只有在返回动画执行完成后A页面才会显示出来。如果不明显可以把A页面的背景设置为深色，可以明显的看到白屏效果。
当多个页面存在，连续多次进行返回的时候，这么改也解决不了问题，你不如提一个pr把，这个问题修改起来有点复杂