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

fix: [H5] tab组件安全区域避让适配 #15862

Closed
wants to merge 10 commits into from
Closed

fix: [H5] tab组件安全区域避让适配 #15862

wants to merge 10 commits into from

Conversation

kongxiaojun
Copy link
Contributor

@kongxiaojun kongxiaojun commented Jun 11, 2024

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

原tab组件适配安全区域时有以下几点错误:

  1. 高度未增加safe-area-inset-bottom
  2. 同时设置了margin-bottom safe-area-inset-bottom和padding-bottom safe-area-inset-bottom
  3. index.html中未增加viewport-fit=cover,上述设置都不会生效

这个 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

codecov bot commented Jun 11, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (3.x@a1a11db). Learn more about missing BASE report.

Additional details and impacted files

Impacted file tree graph

@@          Coverage Diff           @@
##             3.x   #15862   +/-   ##
======================================
  Coverage       ?   56.51%           
======================================
  Files          ?      500           
  Lines          ?    22767           
  Branches       ?     5645           
======================================
  Hits           ?    12866           
  Misses         ?     8666           
  Partials       ?     1235           
Flag Coverage Δ
taro-cli 75.00% <ø> (?)
taro-runner 54.00% <ø> (?)
taro-runtime 79.39% <ø> (?)
taro-web 40.47% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

This was referenced Jun 15, 2024
@@ -41,7 +41,8 @@ body {
&__tabbar {
position: relative;
width: 100%;
height: var(--taro-tabbar-height);
height: calc(var(--taro-tabbar-height) + constant(safe-area-inset-bottom));
height: calc(var(--taro-tabbar-height) + env(safe-area-inset-bottom));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用pandding-bottom如何?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

增加height底部颜色和tabbar一致,视觉效果更舒服没有割裂感

Copy link
Contributor

@yoyo837 yoyo837 Jul 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

padding应该也会一致吧?而且不用关心本身的高度

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

padding不用关系本身的高度?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

padding可以不关心tabbar本身的高度

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在所有页面加padding?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tabbar不能加padding?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

请仔细看一看tabbar的实现,如果加padding tabbar高度是不会变,这种后果要么是无法避让安全区域导航条和tabbar item重叠要么tabbar里的item顶到tabbar最上方显示。

@kongxiaojun kongxiaojun requested a review from yoyo837 July 9, 2024 02:14
@liqinuo liqinuo changed the base branch from main to 3.x July 16, 2024 06:51
@ZEJIA-LIU ZEJIA-LIU deleted the branch NervJS:3.x July 16, 2024 07:16
@ZEJIA-LIU ZEJIA-LIU closed this Jul 16, 2024
@ZEJIA-LIU ZEJIA-LIU reopened this Jul 16, 2024
@ZEJIA-LIU ZEJIA-LIU closed this Jul 16, 2024
@ZEJIA-LIU ZEJIA-LIU reopened this Jul 16, 2024
@kongxiaojun kongxiaojun closed this by deleting the head repository Jul 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants