Vue如何设置吸顶的效果

 

一、显示效果展示：

 

 

 

二、代码展示部分

在TabControle.vue中：

<template>
  <div class="tab-control">
    <div v-for="(item, index) in titles" class="tab-control-item"
    :class="{active: index === currentIndex}" :key="index" @click="itemClick(index)">
    <span>{{item}}</span>
     
    </div> 
  </div>
</template>


<script>
export default {
 name:'TabControl',
 props:{
    titles: {
        type: Array,
        default() {
            return []
        }
    }
 },
 data(){
    //初始化的数据
  return {
       currentIndex: 0,
  }
    
 },
 methods: {
    itemClick(index){
        // console.log(index)
        this.currentIndex = index;

    }
 }
}
</script>

<style>

/* 设置tab的样式 */
 .tab-control {
    display: flex;
    text-align: center;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
}
.tab-control-item{
flex: 1;
height: 40px;
line-height: 40px;
}
/* 设置上下的间隔 */
.tab-control-item span {
    padding: 5px;
}
.active {
    color:  var(--color-high-text);

}

/* 设置下标的颜色 */
.active span {
        border-bottom: 3px solid var(--color-tint);
}
</style>

 

在Home.vue中代码展示：

<template>
    <div>
      <!-- <p>首页</p> -->
      <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <home-swiper-vue :banners="banners"/>
    <RecommendView :recommends="recommends"/>
    <FeatureViewVue></FeatureViewVue>
    <TabControlVue id="tab-control" class="tab-control"  :class="{'is_fixed':isFixed}"  :titles="['流行','新款','精选']" ref="tabControl2"/>
      
      
     <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
        <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
     <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>
    <p>1212</p>

     </div>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar.vue'
import { getHomeMultidata } from '@/network/home'
import HomeSwiperVue from './childComps/HomeSwiper.vue'
import TabControlVue from '@/components/content/tabControl/TabControl.vue'
import RecommendView from './childComps/RecommendView.vue'
import FeatureViewVue from './childComps/FeatureView.vue'
export default {
name:'HomeItem',
data(){
  return {
    banners:[],
    recommends:[],
    isFixed: false,
      OffsetTop: 0, 
  }
},
mounted() {
    // 事件监听滚动条
 window.addEventListener('scroll', this.initHeight);
    this.$nextTick(() => {
    //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
    this.offsetTop = document.querySelector('#tab-control').offsetTop;
    })
},
//回调中移除监听
destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
},
  methods: {  
/********* start-目录吸顶********/
initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
          this.isFixed = scrollTop > this.offsetTop ? true : false;
},
/********* end-目录吸顶********/
  },
components:{
  NavBar,
  HomeSwiperVue,
  RecommendView,
  FeatureViewVue,
  TabControlVue

},
created(){
  getHomeMultidata().then(res =>{
    console.log(res);
    this.banners = res.data.banner.list;
    this.recommends = res.data.recommend.list;
  });
}
}
</script>

<style>
#home {
  padding-top:44px;
 
}

.home-nav{
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
/* 吸顶效果展示 */
.tab-control{
  position: -webkit-sticky;
    width: 100%;
  height: 30px;
  /*  */
}

.is_fixed{
     width: 100%;
     position: sticky;
     top: 44px;
     z-index: 999;
}
</style>

 

注：在home.vue中可注释掉未被调用的组件，如下三行：

 <home-swiper-vue :banners="banners"/>
    <RecommendView :recommends="recommends"/>
    <FeatureViewVue></FeatureViewVue>

 

三、截图展示代码功能

 

 

 

 设置的css的样式：

/* 吸顶效果展示 */
.tab-control{
  position: -webkit-sticky;
    width: 100%;
  height: 30px;
  /*  */
}

.is_fixed{
     width: 100%;
     position: sticky;
     top: 44px;
     z-index: 999;
}

 

 注：最简单的方法是在css中，添加position: sticky; top: 44px;