Comment utiliser Vue pour implémenter les effets de retour au sommet

Comment utiliser Vue pour implémenter des effets de retour en haut

Introduction :
Dans la conception Web moderne, le bouton de retour en haut est une fonctionnalité courante, qui offre aux utilisateurs des opérations pratiques et permet aux utilisateurs de revenir facilement en haut de la page. Cet article expliquera comment utiliser le framework Vue pour implémenter cette fonction et fournira des exemples de code spécifiques.

1. Créer un projet Vue :
Tout d'abord, nous devons créer un projet Vue, qui peut être rapidement créé à l'aide de Vue CLI. Ouvrez le terminal et exécutez la commande suivante :

vue create back-to-top
cd back-to-top

Sélectionnez ensuite la configuration par défaut et attendez que le projet soit créé.

2. Ajoutez le bouton de retour en haut :
Dans le projet Vue, nous pouvons placer le bouton de retour en haut dans le composant App.vue. Ouvrez le fichier src/App.vue et ajoutez le code suivant au modèle :

<template>
  <div id="app">
    <!-- 页面内容 -->
    <router-view/>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top" v-show="scrollPosition > 100" @click="backToTop">
      返回顶部
    </button>
  </div>
</template>

Dans le code ci-dessus, nous utilisons une directive v-show pour contrôler l'affichage et le masquage du bouton de retour en haut. Lorsque la position de défilement est supérieure à 100, le bouton est affiché ; sinon il est masqué. La valeur de la directive v-show est de type booléen et la position de défilement est obtenue dynamiquement en calculant la propriété scrollPosition.

3. Implémentez la fonction de retour en haut :
Ajoutez une variable nommée scrollTop dans data et initialisez-la à 0 :

data() {
  return {
    scrollTop: 0,
  }
},

Ensuite, nous devons écouter l'événement scroll de la fenêtre et mettre à jour la valeur de scrollPosition. Ajoutez le code suivant dans le hook de cycle de vie monté :

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  },
},

Dans le code ci-dessus, nous avons utilisé la propriété window.pageYOffset pour obtenir la position de défilement actuelle. Dans certains anciens navigateurs, cet attribut peut ne pas être pris en charge, nous utilisons donc deux méthodes d'écriture de compatibilité : document.documentElement.scrollTop et document.body.scrollTop.

Enfin, nous devons ajouter une méthode backToTop pour implémenter la fonction de défilement vers le haut de la page. Ajoutez le code suivant dans les méthodes :

methods: {
  // 其他代码...

  backToTop() {
    const duration = 500 // 动画持续时间
    const startPos = this.scrollTop // 当前滚动位置
    const startTime = performance.now() // 开始时间

    const animateScroll = (timestamp) => {
      const elapsed = timestamp - startTime // 已经过去的时间
      const progress = Math.min(elapsed / duration, 1) // 完成百分比
      const easeProgress = 0.5 - 0.5 * Math.cos(progress * Math.PI) // 缓动效果的百分比

      window.scrollTo(0, startPos * (1 - easeProgress)) // 滚动到顶部

      if (progress < 1) {
        requestAnimationFrame(animateScroll)
      }
    }

    requestAnimationFrame(animateScroll)
  },
}

Dans le code ci-dessus, nous utilisons la méthode requestAnimationFrame pour obtenir des effets d'animation. En calculant différents pourcentages, nous implémentons une animation de défilement vers le haut avec un effet d'assouplissement.

4. Ajouter des styles :
Ajoutez quelques styles au bouton de retour en haut, ouvrez le fichier src/App.vue et ajoutez le code suivant au style :

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #777;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.back-to-top:hover {
  opacity: 1;
}

Dans le code ci-dessus, nous avons ajouté quelques styles de base à le bouton et ajout d’un effet de survol dégradé.

Résumé :
Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction d'utilisation du framework Vue pour obtenir l'effet de retour au sommet. Nous avons créé un projet Vue, placé le bouton de retour en haut dans le composant App.vue et utilisé les instructions et les propriétés calculées de Vue pour contrôler l'affichage et le masquage du bouton. En même temps, nous avons écouté l'événement de défilement de la fenêtre et implémenté la fonction de défilement vers le haut via un effet d'animation. J'espère que cet article vous sera utile pour apprendre le framework Vue et mettre en œuvre l'effet de retour au sommet.

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!