Vueは固定位置表示機能を実現します。

vueプロジェクトで吸頂効果を実現します。
例えば、私たちが実現したい機能はナビゲーションバーがページを一定の位置に落とした後に固定します。
まず、mountedライフサイクル内で「scroll」イベントをモニターし、イベントのトリガ後、スクロール処理の関数を実行します。

window.addEventListener('scroll', this.handleScroll)
  methods:{
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
 }
}
 }

完全なソースコードは以下の通りです。

<template>
<div>
 <div class="nav"></div>
<div class="searchBar" id="searchBar">
 <ul :class="searchBarFixed == true ? 'isFixed' :''"> // v-bind    
  <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>
</div>
<div class="content">
</div>
</div>
</template>
<script>
 export default {
  components:{
  },
mounted () {
 window.addEventListener('scroll', this.handleScroll)
},
    data(){
     return {
      searchBarFixed:false
    } 
 },
  methods:{
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
 }
},
 }
 }
</script>
<style lang="less" scope>
.nav{
 height: 250px;
}
.content{
 height: 1900px;
}
.searchBar{
 .isFixed{
  position:fixed;
  background-color:#Fff;
  top:0;
  z-index:999;
 }
 ul {
  width:100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  li {
   list-style: none;
   font-size: 0.8rem;
   text-align: center;
   flex: 1;
   i {
    font-size: 0.9rem;
    padding-left: 5px;
    color: #ccc;
   }
  }
  border-bottom: 1px solid #ddd;
 }
}
</style>

締め括りをつける
以上は小编が皆さんに绍介したvueの固定位置表示机能を実现しました。皆さんに何かお聞きしたいことがあれば、メッセージをください。小编はすぐにご返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。