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

feat: 优化h5端渲染dom结构 可以指定渲染节点id h5端路由支持动画 #10550

Closed
wants to merge 11 commits into from

Conversation

ShaoGongBra
Copy link
Contributor

@ShaoGongBra ShaoGongBra commented Nov 2, 2021

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

新增功能

  • 优化h5端渲染dom结构,删除不必要的节点,当未配置tabBar时,不会存在相应的dom节点
  • 可以指定渲染节点id,在app.config.js里面添加下面的参数,未指定默认为'app'
{
  h5RenderDomId: '节点id'
}
  • h5端路由支持动画,需要在配置里面开启
{
  h5RouterAnimate: true
}
// 或者配置一个对象里面可以设置动画时间
{
  h5RouterAnimate: {
    // 路由动画时间
    animateTime: 300
  }
}

路由动画效果采用css实现,当你开启路由动画,会在页面上注入下面的css,你可以根据你的需求自定义css进行覆盖

.taro_router {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.taro_router .taro_page {
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s;
}

.taro_router .taro_page.taro_tabbar_page {
  transform: none;
}

.taro_router .taro_page.taro_page_show {
  transform: translate3d(0, 0, 0);
}

待更改

  • 构建一个临时类型,等taro新版本更新后即可删除此类型,将AppConfigTemp改为RouterConfig

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

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

这个 PR 涉及以下平台:

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

@taro-bot2
Copy link

taro-bot2 bot commented Nov 2, 2021

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

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

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

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

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

@ShaoGongBra ShaoGongBra changed the title 优化h5端渲染dom结构 可以指定渲染节点id 优化h5端渲染dom结构 可以指定渲染节点id h5端路由支持动画 Nov 4, 2021
@ShaoGongBra ShaoGongBra changed the title 优化h5端渲染dom结构 可以指定渲染节点id h5端路由支持动画 Feta 优化h5端渲染dom结构 可以指定渲染节点id h5端路由支持动画 Nov 4, 2021
@ShaoGongBra ShaoGongBra changed the title Feta 优化h5端渲染dom结构 可以指定渲染节点id h5端路由支持动画 feta: 优化h5端渲染dom结构 可以指定渲染节点id h5端路由支持动画 Nov 4, 2021
@ShaoGongBra ShaoGongBra changed the title feta: 优化h5端渲染dom结构 可以指定渲染节点id h5端路由支持动画 feat: 优化h5端渲染dom结构 可以指定渲染节点id h5端路由支持动画 Nov 4, 2021
@ZakaryCode ZakaryCode added the T-h5 Target - 编译到 H5 label Nov 10, 2021
@Chen-jj
Copy link
Contributor

Chen-jj commented Nov 11, 2021

@ShaoGongBra 麻烦处理一下冲突哈

@Chen-jj Chen-jj added the V-3 Version - 3.x label Nov 11, 2021
@ShaoGongBra
Copy link
Contributor Author

@Chen-jj 改了

@ZakaryCode
Copy link
Contributor

冲突有点多哈,已经根据该 PR 重写了相关特性,会再新的 PR 中合入

部分功能实现调整,且 appId 配置暂时限定在 H5 中

@ShaoGongBra
Copy link
Contributor Author

@ZakaryCode 这么晚还在写代码呀

@ShaoGongBra
Copy link
Contributor Author

@ZakaryCode 优化h5端渲染dom结构,删除不必要的节点,当未配置tabBar时,不会存在相应的dom节点 这条怎么不弄一下呀,这个弄一下,少很多节点,写样式也好写些

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
T-h5 Target - 编译到 H5 V-3 Version - 3.x
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants