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

问题复现

微信小程序原生自定义组件布局问题_第1张图片

<view class="intro">
  欢迎使用代码片段,可在控制台查看代码片段的说明和文档
  <view class="flex-box">
    
    <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;
}

原因分析

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

解决方法

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

只需要在子组件js中加入以下配置:
微信小程序原生自定义组件布局问题_第3张图片
渲染树就会如我们所想的那样展示了,不再会有多的结点。页面内容也如我们所愿。
微信小程序原生自定义组件布局问题_第4张图片
微信小程序原生自定义组件布局问题_第5张图片

你可能感兴趣的:(微信小程序,微信小程序,css3,css)