Cet article présente principalement en détail comment Vue implémente l'affichage au plafond ou à position fixe de certains éléments et surveille les événements de défilement. Il a une certaine valeur de référence. J'espère qu'il pourra vous aider.
J'ai récemment écrit un projet d'application Web VUE, qui doit obtenir l'effet plafond d'une certaine partie. Autrement dit, lorsque la page glisse vers le haut et atteint cette partie, cette partie est fixe et affichée en haut.
1. Écoutez les événements de défilement
Utilisez VUE pour écrire un scrollTop qui imprime le scrollTop actuel sur la console
Tout d'abord, ajoutez un scroll à la fenêtre. dans le hook monté. Écoutez l'événement,
mounted () { window.addEventListener('scroll', this.handleScroll) },
Puis dans la méthode, ajoutez cette méthode handleScroll
handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop console.log(scrollTop) },
La console imprime le résultat :
2. Surveillez la distance entre l'élément et le haut et déterminez si la distance de défilement est supérieure à la distance entre l'élément et le haut, définissez searchBar sur true, sinon ce sera faux
handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop var offsetTop = document.querySelector('#searchBar').offsetTop if (scrollTop > offsetTop) { this.searchBarFixed = true } else { this.searchBarFixed = false } },
Écrivez d'abord un style qui fixe l'élément en haut, isFixed (moins d'écriture)
.searchBar{ .isFixed{ position:fixed; background-color:#Fff; top:0; z-index:999; } ul { WIDTH:100%; height: 40px; line-height: 40px; display: flex; li { font-size: 0.8rem; text-align: center; flex: 1; i { font-size: 0.9rem; padding-left: 5px; color: #ccc; } } border-bottom: 1px solid #ddd; } }
Ensuite, liez la classe de l'élément qui doit être corrigé à searchBar Si searchBar est. vrai, appliquez ce style isFixed
<p class="searchBar" id="searchBar"> <ul :class="searchBarFixed == true ? 'isFixed' :''"> <li>区域<i class="iconfont icon-jiantouxia"></i></li> <li>价格<i class="iconfont icon-jiantouxia"></i></li> <li>房型<i class="iconfont icon-jiantouxia"></i></li> <li>更多<i class="iconfont icon-jiantouxia"></i></li> </ul> </p>
pour le corriger Le résultat final :
Notez que si vous quittez la page, vous devez supprimer ceci événement surveillé, sinon une erreur sera signalée.
destroyed () { window.removeEventListener('scroll', this.handleScroll) },
Recommandations associées :
js mise en œuvre de l'effet de plafond de navigation
Problèmes lors de la mise en œuvre du plafond d'onglets à l'aide de React.js
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!