问题复现
<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中加入以下配置:
渲染树就会如我们所想的那样展示了,不再会有多的结点。页面内容也如我们所愿。