vue는 목록을 위아래로 스크롤하는 기능을 구현합니다.

프런트엔드 개발자로서 목록을 위아래로 스크롤해야 하는 경우가 많지만 기본 스크롤 막대를 사용하면 사용자 경험이 이상적이지 않은 경우가 많습니다. 따라서 이 기사에서는 Vue.js를 사용하여 목록의 위아래 스크롤 효과를 구현하여 사용자 경험을 향상시키는 방법을 소개합니다.

구현 아이디어

상하 순환 스크롤을 구현하는 핵심 아이디어는 목록의 시작과 끝 사이에 일정량의 반복되는 데이터를 추가하여 사용자가 목록의 상단이나 하단으로 스크롤할 때 실제로 중복 데이터로 시작된 다른 쪽 끝에서 스크롤이 시작되도록 하겠습니다. 이러한 방식으로 위아래 원형 스크롤 효과를 얻을 수 있습니다.

단, 원본 데이터 소스에 중복 데이터를 직접 추가할 경우 원본 데이터가 정상적으로 표시되지 않습니다. 따라서 원본 데이터의 무결성을 유지하려면 계산된 속성을 사용하여 이를 달성해야 합니다.

구현 프로세스

Vue.js에서 위아래 순환 스크롤을 구현하는 프로세스는 다음 단계로 나눌 수 있습니다.

1. 목록에 외부 컨테이너 추가

스크롤 효과를 얻으려면 먼저 컨테이너 요소를 추가하고 그 안에 목록을 배치해야 합니다. 동시에 사용자가 목록을 스크롤할 수 있도록 컨테이너의 높이 및 오버플로 속성도 설정해야 합니다.

<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>

2. 데이터 소스 및 계산된 속성 정의

다음으로 데이터 소스 및 계산된 속성을 정의해야 합니다. 여기서는 list 배열을 데이터 소스로 사용하고 displayList는 계산된 속성입니다. 계산된 속성에서는 <code>cloneList 메서드를 통해 데이터 소스를 복제하고, 복제된 데이터 소스를 끝에서 끝까지 연결하고 중복 데이터를 추가하겠습니다. 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);
  }
},

3. 绑定滚动事件

为了根据用户的滚动动作来更新列表的显示内容，我们需要监听列表容器的 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;
  }
},

4. 计算滚动相关的属性

在计算属性中，我们需要计算滚动条的位置和列表项的高度等属性，并在 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);
  }
},

스크롤 이벤트 바인딩

사용자의 스크롤 동작에 따라 목록의 표시 내용을 업데이트하려면 다음의 스크롤 이벤트를 수신해야 합니다. 목록 컨테이너를 탐색하고 스크롤 거리를 계산하여 displayList의 계산된 속성을 업데이트합니다.

rrreee
🎜스크롤 관련 속성 계산🎜🎜🎜계산된 속성에서 스크롤 막대의 위치와 목록 항목의 높이 및 기타 속성을 계산하여 displayList 업데이트 시 다시 계산됩니다. 이 예에서는 this.scrollTop을 사용하여 컨테이너의 현재 스크롤 거리를 저장하고, this.itemHeight를 사용하여 각 목록 항목의 높이를 저장하고, 를 사용합니다. > this.listHeight 전체 목록의 높이를 저장합니다. 🎜rrreee🎜Summary🎜🎜위의 단계를 통해 Vue.js를 기반으로 목록의 위아래 스크롤을 구현할 수 있습니다. 사용자가 목록의 상단이나 하단으로 스크롤하면 실제로 반대쪽 끝에서 반복되는 데이터부터 스크롤이 시작되도록 하여 위아래로 스크롤하는 효과를 얻습니다. 또한, 원본 데이터의 무결성을 유지하기 위해 계산된 속성을 사용하였고, 스크롤 이벤트 바인딩 및 스크롤 관련 속성 계산을 통해 자연스럽고 부드러운 스크롤 효과를 구현하였습니다. 🎜

위 내용은 vue는 목록을 위아래로 스크롤하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!