微信小程序原生自定义组件布局问题

问题复现

<view class="intro">
  欢迎使用代码片段，可在控制台查看代码片段的说明和文档
  <view class="flex-box">
    <!-- avatar自定义组件内容：<view class="avatar"></view> --->
    <avatar></avatar>
    <avatar></avatar>
    <avatar></avatar>
  </view>
  <view class="flex-box">
    <view class="avatar"></view>
    <view class="avatar"></view>
    <view class="avatar"></view>
  </view>
</view>

.flex-box{
  display: flex;
  justify-content: center;
}
/* 自定义组件的样式隔离设置为apply-shared，使其样式能够受到外部组件影响 */
.avatar{
  width: 20%;
  height: 100px;
  margin: 5px;
  background-color: red;
}
.avatar:nth-child(2n){
  width: 20%;
  height: 100px;
  margin: 5px;
  background-color: green;
}

原因分析

在调试器中查看渲染树可以看到，小程序在渲染自定义组件avatar的时候，会额外添加结点，使得其内部的样式会出现一些奇怪的问题，受影响较大的是flex、grid布局等，用来确定布局内容间隔而用的css选择器：:nth-child(n) 等皆会受到影响。

解决方法

微信小程序官方在2.11.2版本开始支持 虚拟化结点，可以使组件本身的结点（也就是我们认为多出来的结点）消失，直接展示内部内容。

只需要在子组件js中加入以下配置：

渲染树就会如我们所想的那样展示了，不再会有多的结点。页面内容也如我们所愿。