佩奇yyyy
佩奇yyyy
  • 发布:2023-04-25 14:45
  • 更新:2023-04-28 14:38
  • 阅读:229

百度、字节小程序中,自定义组件增加了一层节点,导致父组件设置的flex无效,如何解决

分类:uni-app
2023-04-25 14:45 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

  • 佩奇yyyy (作者)

    是的,看到了文档中有提及,除了在自定义组件上加上class,暂时没想到有什么方式可以绕过

    2023-04-28 09:29

佩奇yyyy

佩奇yyyy (作者)

我是一个标签页组件,拆分成两个自定义组件来实现:

  1. y-tabs的插槽渲染的是多个标签项y-tab,由于百度/字节小程序会为自定义组件额外增加一层节点,导致y-tabs的子项不是class为y-tabs-item的元素,而是额外增加的这一层节点;
    2.目前看别人的方案是直接在<y-tab title="标签1" />设置class,但是受实现方式所限,不好在组件上直接设置,是否有其他方式可以给增加的这一层节点设置样式,获取移除这一层节点

代码大致如下

标签页组件 y-tabs

<view class="y-tabs">  
<slot />  
</view>

标签项组件 y-tab

<view class="y-tabs-item">  

</view>

在页面中的使用

<y-tabs>  
    <y-tab title="标签1" />  
    <y-tab title="标签2" />  
    <y-tab title="标签3" />  
</y-tabs>

样式

.y-tabs{  
       position: relative;  
    display: flex;  
    width: 100%;  
    will-change: left;  
}  

.y-tabs-item{  
    flex-shrink: 0;  
    box-sizing: border-box;  
    width: 100%;  
    position: relative;  
}

要回复问题请先登录注册