Comment utiliser Vue pour implémenter l'actualisation déroulante et le chargement pull-up ?

Avec la popularité de l'Internet mobile, le pull-down pour actualiser et le pull-up pour charger sont devenus l'une des fonctionnalités standard des applications et des sites Web modernes. Ces deux méthodes d'interaction peuvent considérablement améliorer l'expérience utilisateur et les performances des pages. Sous le framework Vue, nous pouvons utiliser des plug-ins ou écrire du code nous-mêmes pour réaliser ces deux méthodes d'interaction.

Mise en œuvre de l'actualisation déroulante

L'actualisation déroulante signifie que l'utilisateur déclenche l'actualisation des données en déroulant la page. Dans Vue, nous pouvons implémenter l'actualisation déroulante via toutes les options et API de Vue, et le moyen le plus rapide et le plus fiable consiste à utiliser vue-pull-to.

vue-pull-to est un composant qui implémente des opérations pull-to-refresh dans Vue, nous permettant d'ajouter très simplement du pull-to-refresh aux applications. Développé par Matt Maribojoc, instructeur de Vue.js Summit, ce composant rend l'utilisation de vue-pull-to aussi simple et propre que l'utilisation d'un composant Vue normal.

Tout d'abord, installez vue-pull-to dans le projet :

npm install vue-pull-to --save

Ensuite, introduisez vue-pull-to dans le composant qui nécessite une actualisation déroulante et enregistrez-le en tant que composant de la Vue actuelle.

<template>
  <div>
    <pull-to @refresh="refresh" :disabled="disabled" :high-action="true">
      <div v-for="(item, index) in list" :key="index" class="item">{{ item }}</div>
    </pull-to>
  </div>
</template>

<script>
  import PullTo from 'vue-pull-to'

  export default {
    components: {
      PullTo
    },
    data() {
      return {
        list: [], // 下拉刷新的数据
        disabled: false, // 是否禁用下拉刷新
      }
    },
    methods: {
      // 下拉刷新回调事件
      refresh() {
        // 发送请求，获取最新数据
        axios.get('/getList').then(res => {
          this.list = res.data
        })
      }
    }
  }
</script>

Dans le code ci-dessus, nous introduisons d'abord vue-pull-to et l'enregistrons en tant que composant. Ensuite, utilisez la balise pull-to dans le modèle et écoutez son événement d'actualisation (cet événement est déclenché lorsque l'utilisateur déroule la page), puis envoie une requête au serveur dans la fonction de rappel d'actualisation pour obtenir les dernières données et attribuez les données à la liste, de sorte qu'une fois l'actualisation du menu déroulant terminée, les données de la liste soient mises à jour et la page soit restituée.

Mise en œuvre du chargement pull-up

Le chargement pull-up se produit généralement lorsque la page défile vers le bas, lorsque l'utilisateur fait défiler vers le bas, la page déclenche automatiquement l'opération de chargement des données. Dans Vue, nous pouvons utiliser le plug-in vue-infinite-loading pour implémenter la fonction de chargement pull-up.

vue-infinite-loading est un plugin de chargement basé sur Vue pour les longues listes qui nous permet d'ajouter dynamiquement du contenu ou des données lors du défilement de la liste. Il propose deux façons d'écouter les événements de défilement, la première est une utilisation impérative et la seconde est une utilisation basée sur les composants, et prend en charge la gestion de l'état pendant le chargement et lorsqu'il n'y a plus de données.

Tout d'abord, installez vue-infinite-loading dans le projet :

npm install vue-infinite-loading --save

Ensuite, introduisez le composant vue-infinite-loading dans le composant qui doit ajouter un chargement pull-up et enregistrez-le en tant que composant de la Vue actuelle.

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="item">
      {{ item }}
    </div>
    <infinite-loading :on-infinite="onInfinite" spinner="bubbles" :distance="120">
      <div slot="no-results">没有更多了</div>
    </infinite-loading>
  </div>
</template>

<script>
  import InfiniteLoading from 'vue-infinite-loading'

  export default {
    components: {
      InfiniteLoading
    },
    data() {
      return {
        list: [], // 上拉加载的数据
        page: 1, // 当前页码
        size: 10, // 每页数量
        isLoading: false, // 是否正在加载中
      }
    },
    methods: {
      // 上拉加载回调事件
      onInfinite() {
        if (this.isLoading) return
        this.isLoading = true
        axios.get('/getList', {page: this.page, size: this.size}).then(res => {
          this.list = this.list.concat(res.data)
          this.page++
          this.isLoading = false
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
        })
      }
    }
  }
</script>

Dans le code ci-dessus, nous introduisons d'abord vue-infinite-loading et l'enregistrons en tant que composant. Ensuite, utilisez la balise infinite-loading dans le modèle et écoutez son événement on-infinite (cet événement sera déclenché lorsque l'utilisateur fait défiler vers le bas), puis envoyez une requête au serveur dans la fonction de rappel onInfinite pour obtenir le prochain données de la page et ajoutez-les à Dans le tableau de liste, déclenchez l'événement $InfiniteLoading:loaded, de sorte que lorsque la page est chargée, l'état de chargement soit effacé et la page soit mise à jour et rendue. Nous pouvons également utiliser l'attribut distance pour contrôler la distance qui déclenche le chargement, l'attribut spinner pour définir l'animation de chargement et l'attribut sans résultat pour définir les informations d'invite une fois le chargement terminé, etc.

Résumé

À l'ère de l'Internet mobile, l'actualisation déroulante et le chargement pull-up sont devenus des fonctionnalités standard des applications et des sites Web modernes. Afin d'améliorer l'expérience utilisateur, Vue fournit des plug-ins et des API pour implémenter ces deux interactions. méthodes pour permettre aux développeurs d'ajouter rapidement les fonctions correspondantes pour rendre l'expérience utilisateur plus confortable. Nous avons donné une brève introduction et une démonstration de code des méthodes d'actualisation déroulante et de chargement par extraction dans Vue. Nous espérons que cela sera utile à tout le monde dans le développement réel.

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!