Lo scorrimento infinito è utile quando è necessario visualizzare set di dati di grandi dimensioni nell'applicazione. Scopri come implementarlo in Vue.
Lo scorrimento infinito è una tecnica che puoi utilizzare per visualizzare più contenuti mentre l'utente dell'app scorre la pagina verso il basso. Elimina la necessità dell'impaginazione e consente agli utenti dell'app di continuare a scorrere set di dati di grandi dimensioni.
Configurazione dell'applicazione Vue
Per seguire questo tutorial, è necessaria una conoscenza di base di Vue 3 e JavaScript. Dovresti sapere come gestire Richieste HTTP con Axios.
Per iniziare a imparare a implementare lo scorrimento infinito, crea una nuova app Vue eseguendo quanto segue npm comando nella tua directory preferita:
npm create vue
Durante la configurazione del progetto, Vue ti chiederà di selezionare un preset per la tua app. Scegliere NO per tutte le funzionalità, poiché non avrai bisogno di alcuna aggiunta alla tua app.
Dopo aver creato la nuova app, vai alla directory dell'app ed esegui quanto segue npm comando per installare i pacchetti necessari:
npm install axios @iconify/vue @vueuse/core
IL npm comando installa tre pacchetti: assios (per richieste HTTP), @iconify/vue (per una facile integrazione delle icone in Vue), E @vueuse/core (che offre utilità Vue essenziali).
Userai assios E @iconify/vue per recuperare dati e aggiungere icone alla tua applicazione. @vueuse/core contiene utilità Vue, incluso il usaInfiniteScroll componente per ottenere lo scorrimento infinito.
Recupero di dati fittizi dall'API JSONPlaceholder
Per implementare la funzione di scorrimento infinito, sono necessari dati. Puoi codificare questi dati o ottenere dati da una fonte API falsa gratuita come JSONSegnaposto.
Ottenere questi dati da JSONPlaceholder imita gli scenari della vita reale, poiché la maggior parte delle applicazioni Web ottiene i dati dai database anziché dai dati codificati.
Per recuperare i dati dall'API per la tua applicazione Vue, crea una nuova cartella nel tuo file src directory e nominarla API. In quella cartella, crea un nuovo file JavaScript e incolla il seguente codice:
//getComments.jsimport axios from"axios";
asyncfunctiongetComments(max, omit) {
try {
const comments = await axios.get(
`https://jsonplaceholder.typicode.com/comments? _limit=${max}&_start=${omit}`
);
return comments.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
}
exportdefault getComments;
Il frammento di codice è costituito da una funzione asincrona per ottenere commenti dall'endpoint API " https://jsonplaceholder.typicode.com/comments". Quindi esporta la funzione.
Per spiegare ulteriormente, lo snippet di codice inizia con l'importazione del file assios biblioteca. Il codice definisce quindi il file ottenere commenti funzione con due argomenti: max E omettere.
IL ottenere commenti funzione ospita il axios.get() metodo che effettua una richiesta GET all'URL. L'URL contiene parametri di ricerca max E omettere, che vengono interpolati all'interno della stringa utilizzando valori letterali modello (``). Ciò consente di passare valori dinamici nell'URL.
La funzione restituisce quindi un nuovo array costituito da corpo dei commenti ricevuti dall'endpoint API utilizzando il carta geografica funzione.
Se si verifica un errore, il frammento di codice lo registra nella console. Il frammento di codice esporta quindi questa funzione in altre parti dell'applicazione.
Ora che hai gestito la logica per il recupero dei dati fittizi, puoi creare un nuovo componente per visualizzare i dati fittizi e gestire la funzione di scorrimento infinito.
Crea un nuovo file InfiniteScroll.vue nel src/components directory e aggiungere il seguente codice:
