Vue进度条如何实现偶数项逆向渲染？-css教程-PHP中文网

Vue进度条如何实现偶数项逆向渲染？

花韻仙語

发布： 2025-02-22 10:38:15

原创

1035人浏览过

vue进度条如何实现偶数项逆向渲染？

Vue进度条偶数项逆向渲染实现方案

本文介绍一种实现类似上图所示进度条的方法，该进度条数据长度不固定，偶数项需要从右向左渲染。

核心思路是利用CSS的nth-child选择器结合transform属性实现。

代码示例：

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

152

查看详情

立即学习“前端免费学习笔记（深入）”；

<code class="vue"><template>
  <div class="progress-bar">
    <div 
      v-for="(step, index) in progress" 
      :key="index" 
      :class="{ 'reverse': index % 2 !== 0 }"
      :style="{ width: `${step}%` }" 
      class="step">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: [30, 20, 10, 40, 15, 25], // 可变长度数据
    };
  },
};
</script>

<style scoped>
.progress-bar {
  display: flex;
  width: 100%;
  height: 10px;
  background: #eee;
}

.step {
  background: #000;
  height: 10px;
}

.reverse {
  transform: rotate(180deg) translateX(-100%); /* 偶数项逆向渲染 */
  margin-left: -1px; /* 调整间距，避免缝隙 */
}
</style></code>

登录后复制

代码说明：

v-for循环: 遍历progress数组，动态渲染进度条条块。
index % 2 !== 0: 判断索引index是否为奇数，如果是奇数则添加reverse类名。
reverse类: 使用transform: rotate(180deg) translateX(-100%);实现逆向渲染。rotate(180deg)旋转180度，translateX(-100%)将元素向左移动自身宽度，从而实现从右向左的视觉效果。 margin-left: -1px; 用于微调间距，防止条块之间出现细微的缝隙。
width:${step}%`: 动态设置每个条块的宽度。