vue implémente le défilement de la liste de haut en bas

En tant que développeur front-end, nous devons souvent faire défiler les listes de haut en bas, mais si nous utilisons des barres de défilement natives, l'expérience utilisateur n'est souvent pas idéale. Par conséquent, cet article expliquera comment utiliser Vue.js pour obtenir l'effet de défilement haut et bas de la liste afin d'améliorer l'expérience utilisateur.

Idée d'implémentation

L'idée principale pour implémenter le défilement circulaire haut et bas est d'ajouter une certaine quantité de données répétées entre le début et la fin de la liste, de sorte que lorsque l'utilisateur fait défiler vers le haut ou le bas de la liste, nous allons en fait faire démarrer le défilement à partir de l'autre extrémité avec des données en double. De cette manière, l'effet de défilement circulaire de haut en bas peut être obtenu.

Cependant, si des données en double sont ajoutées directement à la source de données d'origine, les données d'origine ne seront pas affichées normalement. Par conséquent, nous devons y parvenir à l’aide de propriétés calculées pour maintenir l’intégrité des données d’origine.

Processus d'implémentation

Le processus d'implémentation du défilement circulaire haut et bas dans Vue.js peut être divisé en les étapes suivantes :

1. Ajouter un conteneur externe à la liste

Afin d'obtenir l'effet de défilement, nous d'abord vous devez ajouter un élément conteneur et y placer la liste. Dans le même temps, nous devons également définir les propriétés de hauteur et de débordement du conteneur afin que l'utilisateur puisse faire défiler la liste.

<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. Définissez la source de données et les propriétés calculées

Ensuite, nous devons définir la source de données et les propriétés calculées. Ici, nous utilisons un tableau list comme source de données et displayList<. /code > est une propriété calculée. Dans la propriété calculée, nous clonerons la source de données via la méthode <code>cloneList, connecterons les sources de données clonées bout à bout et ajouterons des données en double. 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);
  }
},

Lier les événements de défilement

Afin de mettre à jour le contenu d'affichage de la liste en fonction de l'action de défilement de l'utilisateur, nous devons écouter l'événement scroll de le conteneur de liste et calcule la distance de défilement, met à jour la propriété calculée de displayList.

rrreee
🎜Calculer les propriétés liées au défilement🎜🎜🎜Dans les propriétés calculées, nous devons calculer la position de la barre de défilement et la hauteur des éléments de la liste et d'autres propriétés, et les utiliser dans displayList Recalculé lors de la mise à jour. Dans cet exemple, nous utilisons this.scrollTop pour enregistrer la distance de défilement actuelle du conteneur, utilisons this.itemHeight pour enregistrer la hauteur de chaque élément de la liste et utilisons this.listHeight pour enregistrer la hauteur de la liste entière. 🎜rrreee🎜Résumé🎜🎜Grâce aux étapes ci-dessus, nous pouvons réaliser un défilement de haut en bas de la liste basé sur Vue.js. Lorsque l'utilisateur fait défiler vers le haut ou le bas de la liste, nous faisons en fait démarrer le défilement à partir des données répétées à l'autre extrémité, obtenant ainsi l'effet de défilement de haut en bas. De plus, nous avons utilisé des propriétés calculées pour maintenir l'intégrité des données d'origine et obtenu un effet de défilement naturel et fluide en liant les événements de défilement et en calculant les propriétés liées au défilement. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!