css类似拉链的布局怎么写?

这样的布局

有如下描述这些节点的数组,此数组是我自己规定,格式可以改(只要大佬们开口就行)

[
    {
        type:0, // * 0代表红,1代表蓝
        text:1
    },
    {
        type:0, // * 0代表红,1代表蓝
        text:2
    },
    {
        type:0, // * 0代表红,1代表蓝
        text:3
    },
    {
        type:1, // * 0代表红,1代表蓝
        text:1
    },
    {
        type:0, // * 0代表红,1代表蓝
        text:1
    },
    ....
]

这个数组里面大概有一千多条数据,也就是说要渲染出一千多个节点,求大佬们支招这样的布局该怎样写

阅读 2.2k
2 个回答
  1. absolute 定位。
  2. transform 移动
  3. margin 移动

线的话,可以

  1. 背景图
  2. 边框
  3. padding 挤开什么的。

image.png


image.png


完成了。兼容性具体看你自己的方案了
image.png

<template>
  <div class="box">
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="{ 'right-red': item.type == 0 }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          type: 0, // * 0代表红,1代表蓝
          text: 12
        },
        {
          type: 0, // * 0代表红,1代表蓝
          text: 2
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.box {
  margin: auto;
  width: 5px;
  background: #000;
  color: #fff;
  > div {
    width: max-content;
    margin-bottom: 10px;
    padding: 5px 10px;
    background: blue;
    transform: translate(-100%, 0);
    &.right-red {
      background: red;
      transform: translate(5px, 0);
    }
  }
}
</style>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题