vue实现列表上下循环滚动

PHPz

发布： 2023-05-25 11:24:07

原创

2544 人浏览过

作为一名前端开发者，我们往往需要实现列表的上下滚动，但如果使用原生的滚动条，用户体验常常很不理想。因此，本文将介绍如何借助 Vue.js 实现列表的上下循环滚动效果，以提升用户体验。

实现思路

实现上下循环滚动的核心思路是在列表的首尾之间添加一定量的重复数据，这样当用户滚动到列表的顶部或者底部时，我们将会让滚动实际上是从另一端的重复数据开始的。这样就能够实现上下循环滚动的效果。

但是，如果直接将重复数据直接添加到原本的数据源中，会导致无法正常地显示原始数据。因此，我们需要借助计算属性来实现这一目标，以保持原始数据的完整性。

实现过程

在Vue.js中实现上下循环滚动的过程可以分为以下几个步骤：

给列表添加一个外部容器

为了实现滚动效果，我们首先需要添加一个容器元素，并将列表放置在其中。同时，我们还需要设置容器的高度和 overflow 属性，以便用户可以滚动列表。

<div class="list-container"
     style="height: 400px;
            overflow: auto;">
  <ul class="list">
    <li v-for="(item, index) in displayList"
        :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

登录后复制

定义数据源和计算属性

接下来，我们需要定义数据源和计算属性，这里我们以一个数组 list 为数据源，以 displayList 为计算属性。在计算属性中，我们会通过 cloneList 方法将数据源克隆一份，并将克隆的数据源首尾相接，并添加重复数据。

data() {
  return {
    list: [
      { id: 1, text: 'item 1' },
      { id: 2, text: 'item 2' },
      ...
      { id: 20, text: 'item 20' }
    ]
  }
},
computed: {
  displayList() {
    const cloneList = [...this.list, ...this.list, ...this.list];
    const top = this.scrollTop % this.itemHeight;
    const startIndex = Math.floor(this.scrollTop / this.itemHeight) % this.list.length;
    const endIndex = startIndex + Math.ceil(this.listHeight / this.itemHeight);

    return cloneList.slice(startIndex, endIndex + 1);
  }
},

登录后复制

绑定滚动事件

为了根据用户的滚动动作来更新列表的显示内容，我们需要监听列表容器的 scroll 事件，通过计算被滚动的距离，更新 displayList 的计算属性。

mounted() {
  const listContainer = document.querySelector('.list-container');
  listContainer.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const listContainer = document.querySelector('.list-container');
    this.scrollTop = listContainer.scrollTop;
  }
},

登录后复制

计算滚动相关的属性

在计算属性中，我们需要计算滚动条的位置和列表项的高度等属性，并在 displayList 的更新时重新计算。在本例中，我们通过 this.scrollTop 来保存容器当前被滚动的距离，通过 this.itemHeight 来保存每一个列表项的高度，通过 this.listHeight 来保存整个列表的高度。

data() {
  return {
    ...
    scrollTop: 0,
    itemHeight: 30,
    listHeight: this.list.length * this.itemHeight
  }
},
computed: {
  ...
  displayList() {
    ...
    this.listHeight = this.list.length * this.itemHeight;
    return cloneList.slice(startIndex, endIndex + 1);
  }
},

登录后复制