vue 实现自动滚动展示信息

1. 在 Vue 组件中创建一个滚动区域，设置它的高度和宽度，以及 overflow 属性为 auto。

<template>
  <div class="scroll-area">
    <ul ref="list" class="list">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10"]
    };
  }
};
</script>

<style>
.scroll-area {
  height: 200px;
  width: 300px;
  overflow: auto;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
}
</style>

2. 在组件的 mounted 钩子函数中，使用 setInterval 方法和 scrollTop 属性实现自动滚动。

<template>
  <div class="scroll-area">
    <ul ref="list" class="list">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10"]
    };
  },
  mounted() {
    setInterval(() => {
      this.$refs.list.scrollTop += 1;
    }, 10);
  }
};
</script>

<style>
.scroll-area {
  height: 200px;
  width: 300px;
  overflow: auto;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
}
</style>

在上面的代码中，我们使用 setInterval 方法每隔 10 毫秒调用一次匿名函数，使滚动区域的 scrollTop 属性每次增加 1，从而实现自动滚动的效果。