微信小程序循环组件 first-child、last-child 失效问题

DOM 结构

CSS 样式

.c-cell:last-child::after {
    display: none;
}

就是想最后一个 cell 的 border 不显示而已

解决前

然而直接这样，导致每一个 cell 的 border 都消失了，也就是说，每一个 cell 都变成了 last-child

查看实际渲染 HTML 如下:

为什么，狂搜一顿没有想要都结果...

文档

偶然瞄见，虚拟化组件节点： 默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 class style 、动画、 flex 布局等，就如同普通的 view 组件节点一样。

说的应该是本身组件被包了一层节点，所以导致 first-child、last-child 永远是自己

解决方式

Component({
  options: {
    virtualHost: true
  }
})

验证

搞定

#### 参考文档

• 虚拟化组件节点

---- YSH, Wednesday, July 22 2022, Mostly Cloudy