Maison > interface Web > js tutoriel > le corps du texte

Exemple de point d'ancrage simulé vue2.0

亚连
Libérer: 2018-05-30 13:53:06
original
1628 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple de point d'ancrage de simulation vue2.0, qui a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans le projet vue, en raison de l'utilisation de sauts de routage, il sera impossible d'utiliser la balise a régulière avec la fonction d'ancrage de l'ID.

Solution :

<a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(&#39;#anchor&#39;)"> 灰啊灰啊我的骄傲放纵</a>
Copier après la connexion

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop
 }
}
Copier après la connexion

Mise à jour 17. 9. 20 : Ce qui précède a un BUG dans FireFox, le correctif est le suivant :

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop; // chrome
  document.documentElement.scrollTop = anchor.offsetTop; // firefox
 }
}
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Vue utilise des mixins pour implémenter du code d'image compressé

Internationalisation du projet Vue Installation et utilisation de vue-i18n Tutoriel

Diffusion et réception d'événements Vue2.0 (mode observateur)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!