【VUE】使用Vue和CSS动画创建滚动列表

news2024/10/5 16:25:31

使用Vue和CSS动画创建滚动列表

在这篇文章中，我们将探讨如何使用Vue.js和CSS动画创建一个动态且视觉上吸引人的滚动列表。这个列表将自动滚动显示项目，类似于轮播图的方式，非常适合用于仪表盘、排行榜或任何需要在有限空间内展示项目列表的应用。
在这里插入图片描述

设置

我们的滚动列表将显示各个地区及其相应的百分比值。列表中的每个项目将通过唯一的背景和进度条以视觉化方式展示其值。

HTML结构

我们首先定义Vue组件中列表的HTML结构。.chart-l-3类包裹了我们的列表，每个项目通过Vue的v-for指令在数据集dataL3中进行迭代。基本结构如下所示：

<div class="chart chart-l-3 list-box">
  <div v-for="(item,index) in dataL3" :key="index" :class="{'bgy':index%2==0}" class="list-item">
    <div :class="{'yellow':index<3}" class="tag">NO.{{ index+1 }}</div>
    <div class="name">{{ item.name }}</div>
    <div class="jdt-box">
      <div :style="{width: item.value+'%'}" class="jdt-bar"></div>
    </div>
    <div class="value">{{ item.value }}%</div>
  </div>
</div>

Vue组件

Vue组件的data函数返回一个区域数组及其对应值，这些值将填充列表：

export default {
  data() {
    return {
      dataL3: [
        { name: '广东省', value: 15 },
        // 更多项目
      ],
    }
  },
  // 组件的其余部分...
}

动画逻辑

为了创建滚动动画，我们在mounted生命周期钩子中使用setInterval函数来操纵第一个列表项目的marginTop：

mounted() {
  setInterval(() => {
    const firstDom = document.getElementsByClassName('chart-l-3')[0].getElementsByClassName('list-item')[0];
    this.showIndex++;
    if (this.showIndex === (this.dataL3.length-5)) {
      this.showIndex = 0;
    }
    firstDom.style.marginTop = '-' + 2.5 * this.showIndex + 'vw';
  }, 3000);
}

这段逻辑通过不断修改marginTop属性，创建了列表通过向上移动第一个项目而滚动的印象，从而循环显示列表。

给列表添加样式 - CSS

为了确保我们的列表看起来漂亮，我们使用less来应用各种样式，涵盖尺寸、字体、颜色和背景图像。这里的一个关键点是使用过渡效果以实现平滑滚动动画：

.list-item{
  transition: all 0.5s ease;
  .tag{
    background: url('./assets/icon-tag-blue.svg') no-repeat;
    // 更多样式...
  }
  .jdt-bar{
    background-color: #87f7c7;
    // 更多样式...
  }
  // 更多样式...
}