Componente Vue.js per evidenziare le voci di menu sullo scorrimento

Componente vue leggero e semplice da usare che evidenzia le voci di menu mentre si scorre la pagina, scorrendo anche alla sezione di destinazione quando si fa clic.
vue-scrollactive .Questo componente Vue 2 semplifica l'evidenziazione di una voce di menu con una classe 'attiva' durante lo scorrimento.

• Evidenzia gli elementi con una classe mentre scorri
• Scorre alla sezione dell'articolo al clic
• Facilitazione personalizzabile per lo scorrimento al clic
• Emette eventi sui cambi di classe

Assicurati di controllare il demo e vedere tutte le opzioni disponibili e giocare con loro!

Installazione

Installa tramite |_+_| e usalo come plugin vue nella tua app.

O se desideri includerlo in un |_+_| tag, includi semplicemente il |_+_| file che si trova in |_+_| cartella così:

Se non stai eseguendo alcun transpiler come Babel, molto probabilmente dovrai installare un polyfill Promise per supportare i browser più vecchi poiché questa libreria dipende dalle promesse per funzionare.

Utilizzo

Dovresti avvolgere il tuo menu in un |_+_| tag (che sarà il tuo nav) e aggiungi un |_+_| classe nel tuo |_+_| tag come mostro nell'esempio seguente:

Puoi seguire la struttura che desideri, assicurati di impostare |_+_| classe negli elementi che si desidera evidenziare e impostarne |_+_| con un ID valido che desideri monitorare durante lo scorrimento.

Eventi

Scrollactive emetterà un |_+_| evento quando una voce di menu attiva viene modificata in un'altra, puoi catturare quell'evento facendo come nell'esempio seguente:

Configurazione

Tutte le opzioni dovrebbero essere passate come prop in |_+_| componente come puoi vedere nell'esempio qui sotto:

Ricorda che tutte le opzioni sono opzionali e puoi vedere i valori predefiniti nelle sezioni Opzioni.

Opzioni

Scarica i dettagli:

Autore: eddiemf

Dimostrazione dal vivo: ttps://eddiemf.github.io/vue-scrollactive/examples/example-1.html

GitHub: https://github.com/eddiemf/vue-scrollactive

#vuejs #javascript # vue-js