Taro中的坑

发布于:2024-07-22 ⋅ 阅读:(187) ⋅ 点赞:(0)

Taro什么玩意啊,文档文档不全,案例案例也不详细,为了绩效开源的东西用起来真的是如鲠在喉!

1 ScrollView自动撑开

视图内容(也就是ScrollView内部的视图)

在封装自己的弹框的时候用到ScrollView,如果给ScrollView一个固定的高度,他是肯定会滚动。

但是我们设计要求是让他自动撑开,达到最大高度再出现滚动。

.layout-scrollView {
      //隐藏scrollView的滚动条
      ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
      }
      display: flex;
      flex-direction: column;
      max-height: 90vh;
}

不要给ScrollView设置高度,只设置一个最大高度,那么ScrollView就会在没有达到最大高度时候自己撑开,且不会出现滚动。内容视图到达最大才出现滚动。

1.2 ScrollView隐藏滚动条

 ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
}

1.3 ScrollView设置padding-bottom margin-bottom失效

开发中经常都会设置一个底部安全高度,使用padding-bottom margin-bottom都可以。但是给ScrollView设置时候,如果视图内容超过ScrollView的最大高度,那么padding-bottom margin-bottom就会失效。视图内容不超过ScrollView的最大高度时候padding-bottom margin-bottom可以生效。

解决:

只能给视图内容最后一个子元素设置padding-bottom margin-bottom。

1.4 弹框中ScrollView滚动透传问题

原文地址 Taro3.x 容易踩坑的点(阻止滚动穿透,弹框蒙层父级定位)_taro弹窗-CSDN博客

解决弹框滚动的时候,下层也会滚动问题=》阻止滚动穿透(react,vue)
案例描述:

页面展示时需要滚动条才可以显示完整,但是当我们显示弹框的时候,即使不需要滚动条,但是页面仍然可以滚动,并且下层内容会随着滚动变化。

阻止滚动穿透
Taro 3 的事件机制。因为事件都以 bind 的形式进行绑定,因此不能使用 e.stopPropagation() 阻止滚动穿透。

针对滚动穿透,目前总结了两种解决办法:

一、样式
使用样式解决:禁止被穿透的组件滚动。

这也是最推荐的做法。

二、catchMove
Taro 3.0.21 版本开始支持
但是地图组件本身就是可以滚动的,即使固定了它的宽高。所以第一种办法处理不了冒泡到地图组件上的滚动事件。

需要真机预览或者模拟查看,pc模拟器上看不出效果。

在需要的弹框scroll-view 外层加上下面的内容包裹scroll-view 使用后真机上将不会滚动下层内容

<View catchMove></View>

解决弹框内部再显示其余的弹框,父级高度的定位限制,(RootPortal)
root-portal 使整个子树从页面中脱离出来,类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
案例描述:

以我项目中为例,使用了taro-ui的‘AtFloatLayout’组件,

项目中当我使用'AtFloatLayout'显示购物车后,内部又嵌套了一个‘AtModal’来展示点击购物车内部商品时出现切换规格的弹框;

此时如果不作处理,AtModal的最大高度是AtFloatLayout的高度,如果AtFloatLayout比较低AtModal无法再整个页面中上下居中显示,且可能会显示不全。

例如此图:未添加root-portal 的情况


解决方案:

<AtFloatLayout>
    <RootPortal>
        <AtModal></AtModal>
    </RootPortal>
</AtFloatLayout>
成功后模拟器element显示


解决后显示上下居中 以窗口最大为父级

成功解决弹框内部再显示其余的弹框高度的问题


网站公告

今日签到

点亮在社区的每一天
去签到