求教,如何实现一个节点树列表的条纹控制?
发布于 6 年前 作者 JZLeung 2920 次浏览 来自 问答

如图: 1512035761448.jpg 要的效果就是,每能显示的每一行,都要按照【黑白黑白黑白】的底色进行渲染。该如何实现?

4 回复

就是相邻的两行不能是同一种底色。列表层级不定。

用react

来自酷炫的 CNodeMD

@zswnew 现在用的是Vue。 自豪地采用 CNodeJS ionic

前序遍历节点树,标记序号,绑定颜色 用原生写了个,vue的话应该会更简单 css

.black{
  color:#FFF;
  background-color:#000;
}
.white{
  color:#000;
  background-color:#fff;
}

html

<ul id="root">
  <li><p>Item 01</p></li>
  <li><p>Item 02</p></li>
  <li><p>Item 03</p>
    <ul>
      <li><p>Item 04</p></li>
      <li><p>Item 05</p></li>
      <li><p>Item 06</p></li>
      <li><p>Item 07</p></li>
      <li><p>Item 08</p></li>
    </ul>
  </li>
</ul>

js

function setCls(r, index = 0) {
  [...r.children]
    .map(it => [...it.children])
    .forEach(c => {
      c.forEach(i => {
        if (i.tagName === 'P') {
          i.className = index % 2 ? 'white' : 'black';
          ++index;
        } else if (i.tagName === 'UL') {
          index = setCls(i, index);
        }
      });
    });
    return index;
}
setCls(document.getElementById('root'));
回到顶部