Heim > Web-Frontend > js-Tutorial > Detaillierte Erklärung, wie Vue auf Scroll-Ereignisse lauscht und ein Element oben oder an einer festen Position anzeigt

Detaillierte Erklärung, wie Vue auf Scroll-Ereignisse lauscht und ein Element oben oder an einer festen Position anzeigt

小云云
Freigeben: 2018-05-10 16:48:57
Original
9203 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich detailliert vor, wie Vue die Anzeige bestimmter Elemente an der Obergrenze oder der festen Position implementiert und einen gewissen Referenzwert hat.

Ich habe kürzlich ein VUE-Web-App-Projekt geschrieben, das den Deckeneffekt eines bestimmten Teils erzielen muss. Das heißt, wenn die Seite nach oben gleitet und diesen Teil erreicht, wird dieser Teil fixiert und oben angezeigt.

1. Auf Scroll-Ereignisse achten
Verwenden Sie VUE, um einen ScrollTop zu schreiben, der den aktuellen ScrollTop auf der Konsole ausgibt.
Fügen Sie zunächst einen Scroll zum Fenster hinzu im montierten Hook. Hören Sie sich das Ereignis an,

mounted () {
 window.addEventListener('scroll', this.handleScroll)
},
Nach dem Login kopieren

Dann fügen Sie in der Methode diese handleScroll-Methode hinzu

handleScroll () {
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 console.log(scrollTop)
},
Nach dem Login kopieren

Die Konsole gibt das Ergebnis aus:

2. Überwachen Sie den Abstand vom Element nach oben und stellen Sie fest, ob der Bildlaufabstand größer ist als der Abstand vom Element nach oben. Setzen Sie searchBar auf true, andernfalls ist es false

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
 }
},
Nach dem Login kopieren

Schreiben Sie zuerst einen Stil, der das Element oben fixiert, isFixed (weniger Schreiben)

.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;
 }
}
Nach dem Login kopieren

Binden Sie dann die Klasse des Elements, das fixiert werden muss, an searchBar wahr, wenden Sie diesen isFixed-Stil

<p class="searchBar" id="searchBar">
 <ul :class="searchBarFixed == true ? &#39;isFixed&#39; :&#39;&#39;">
 <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>
Nach dem Login kopieren

an, um ihn zu beheben. Das Endergebnis:

Beachten Sie, dass Sie diesen entfernen müssen, wenn Sie die Seite verlassen überwachtes Ereignis, andernfalls wird ein Fehler gemeldet.

destroyed () {
 window.removeEventListener(&#39;scroll&#39;, this.handleScroll)
},
Nach dem Login kopieren

Verwandte Empfehlungen:

Beispielfreigabe zur Implementierung der Deckenbedienung der Navigationsleiste mit JavaScript

js Implementierung des Effekts der Navigationsobergrenze

Probleme bei der Implementierung der Tab-Obergrenze mit „react.js“

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Vue auf Scroll-Ereignisse lauscht und ein Element oben oder an einer festen Position anzeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage