vue实现列表自动滚动(纯与原生方式)

在Vue中实现列表自动滚动，可以通过原生JavaScript操作列表容器的scrollTop属性来实现。以下是一个简单的例子：

<template>

  <div class="list-container" ref="listContainer">

    <ul>

      <li v-for="item in items" :key="item">{{ item }}</li>

    </ul>

  </div>

</template>

<script>

export default {

  data() {

    return {

      items: ['Item 1', 'Item 2', 'Item 3', ..., 'Item N'] // 假设有N个条目

    };

  },

  mounted() {

    this.startAutoScroll();

  },

  methods: {

    startAutoScroll() {

      const listContainer = this.$refs.listContainer;

      setInterval(() => {

        listContainer.scrollTop += 1;

        if (listContainer.scrollHeight - listContainer.scrollTop === listContainer.clientHeight) {

          listContainer.scrollTop = 0; // 如果到达底部，则重置滚动位置到顶部

        }

      }, 100); // 每0.1秒滚动1像素

    }

  }

};

</script>

<style>

.list-container {

  height: 200px; /* 设置一个固定的高度 */

  overflow: auto; /* 开启滚动 */

}

</style>

在这个例子中，我们有一个名为list-container的容器，它包含一个ul列表。我们在mounted钩子中调用startAutoScroll方法，该方法使用setInterval每0.1秒滚动列表的一个像素。如果滚动到达列表底部，它会重置滚动位置到顶部，实现循环滚动的效果。

原文地址：https://blog.csdn.net/Rverdoser/article/details/142923388

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！