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

使用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;
    // 更多样式...
  }
  // 更多样式...
}

总结

我们的滚动列表不仅视觉上吸引人，还以动态方式展示了有限空间内的项目列表，非常适合各种应用。通过结合Vue的响应式数据绑定与CSS动画与过渡效果，我们创建了一个平滑自动滚动的列表，可以显示从排行榜排名到仪表盘信息等任何内容。

下一步

这个基本实现可以通过更多交互功能进行进一步增强，如悬停暂停功能、动态加载数据或集成API以显示实时信息。探索和自定义的可能性是广泛的，您可以根据项目的需要进行调整。