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

DOM 结构


  
  
  

CSS 样式

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

就是想最后一个 cellborder 不显示而已

解决前

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

查看实际渲染 HTML 如下:

微信小程序循环组件 first-child、last-child 失效问题_第1张图片

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

文档

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

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

解决方式

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

验证

微信小程序循环组件 first-child、last-child 失效问题_第2张图片

搞定

#### 参考文档

  • 虚拟化组件节点

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

你可能感兴趣的