vue implementiert das Scrollen von Listen nach oben und unten

Als Frontend-Entwickler müssen wir oft in Listen nach oben und unten scrollen, aber wenn wir native Bildlaufleisten verwenden, ist die Benutzererfahrung oft nicht ideal. Daher wird in diesem Artikel erläutert, wie Sie mit Vue.js den Auf- und Ab-Scrolleffekt der Liste erzielen und so die Benutzererfahrung verbessern.

Implementierungsidee

Die Kernidee zur Implementierung des kreisförmigen Auf- und Abwärtsscrollens besteht darin, eine bestimmte Menge wiederholter Daten zwischen dem Anfang und dem Ende der Liste hinzuzufügen, sodass, wenn der Benutzer zum Anfang oder Ende der Liste scrollt, Wir werden den Bildlauf tatsächlich am anderen Ende beginnen lassen, beginnend mit doppelten Daten. Auf diese Weise kann der Effekt eines kreisförmigen Auf- und Abwärtsscrollens erzielt werden.

Wenn jedoch doppelte Daten direkt zur Originaldatenquelle hinzugefügt werden, werden die Originaldaten nicht normal angezeigt. Daher müssen wir dies mithilfe berechneter Eigenschaften erreichen, um die Integrität der Originaldaten aufrechtzuerhalten.

Implementierungsprozess

Der Prozess der Implementierung des kreisförmigen Auf- und Abwärtsscrollens in Vue.js kann in die folgenden Schritte unterteilt werden:

1. Fügen Sie der Liste einen externen Container hinzu

Um den Scrolleffekt zu erzielen, müssen wir zuerst Sie müssen ein Containerelement hinzufügen und die Liste darin platzieren. Gleichzeitig müssen wir auch die Höhen- und Überlaufeigenschaften des Containers festlegen, damit der Benutzer durch die Liste scrollen kann.

<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. Definieren Sie die Datenquelle und die berechneten Eigenschaften

Als nächstes müssen wir die Datenquelle und die berechneten Eigenschaften definieren. Hier verwenden wir ein Array list als Datenquelle und displayList< /code > ist eine berechnete Eigenschaft. In der berechneten Eigenschaft klonen wir die Datenquelle über die Methode <code>cloneList, verbinden die geklonten Datenquellen Ende an Ende und fügen doppelte Daten hinzu. 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);
  }
},

Bildlaufereignisse binden

Um den Anzeigeinhalt der Liste entsprechend der Bildlaufaktion des Benutzers zu aktualisieren, müssen wir das scroll-Ereignis von abhören den Listencontainer und berechnet die Scrolldistanz, aktualisiert die berechnete Eigenschaft von displayList.

rrreee
🎜Bildlaufbezogene Eigenschaften berechnen🎜🎜🎜In den berechneten Eigenschaften müssen wir die Position der Bildlaufleiste und die Höhe der Listenelemente sowie andere Eigenschaften berechnen und diese in displayList Wird bei Aktualisierung neu berechnet. In diesem Beispiel verwenden wir this.scrollTop, um die aktuelle gescrollte Distanz des Containers zu speichern, verwenden this.itemHeight, um die Höhe jedes Listenelements zu speichern, und verwenden this.listHeight, um die Höhe der gesamten Liste zu speichern. 🎜rrreee🎜Zusammenfassung🎜🎜Durch die oben genannten Schritte können wir ein Auf- und Abwärtsscrollen der Liste basierend auf Vue.js erreichen. Wenn der Benutzer zum Anfang oder Ende der Liste scrollt, beginnen wir tatsächlich mit den wiederholten Daten am anderen Ende und erzielen so den Effekt eines Scrollens nach oben und unten. Darüber hinaus haben wir berechnete Eigenschaften verwendet, um die Integrität der Originaldaten aufrechtzuerhalten, und einen natürlichen und reibungslosen Scroll-Effekt erzielt, indem wir Scroll-Ereignisse gebunden und scrollbezogene Eigenschaften berechnet haben. 🎜

Das obige ist der detaillierte Inhalt vonvue implementiert das Scrollen von Listen nach oben und unten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!