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

PHPz

Libérer： 2023-05-25 11:24:07

original

2529 Les gens l'ont consulté

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 :

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>

Copier après la connexion

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);
  }
},

Copier après la connexion

绑定滚动事件

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

Copier après la connexion

计算滚动相关的属性

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

Copier après la connexion

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.

this.scrollTop

this.itemHeight

this.listHeight

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!