Vue项目吸顶(固钉)操作实例

主页.vue

• 要点：
  • vue中不要操作Dom来获取元素，这里用ref属性来替代Dom获取元素。
  • this.$ refs.myswiper.$el ：获取标签上标有属性ref='myswiper’的元素
  • this. $ refs.myswiper.$el.offsetHeight ：表示该轮播swiper元素的高度
  • document.documentElement.scrollTop： 表示屏幕滚动的高度

<template>
  <div>
      <swiper :key="looplist.length" ref="myswiper">
        <div class="swiper-slide" v-for="data in looplist" :key="data.bannerId">
          <img :src="data.imgUrl"/>
        </div>
      </swiper>
    <!-- 注意：这里给引用的组件上加类名，则该组件的最外层div上也会加上类名，即可在组件上操作类名的css -->
    <filmheader :class="isFixed?'fixed':''"></filmheader>
    <router-view></router-view>
  </div>
</template>

<script>
import swiper from '@/views/Film/Swiper'
import filmheader from '@/views/Film/FilmHeader'

import axios from 'axios'
export default {
  data () {
    return {
      looplist: [],
      isFixed: false
    }
  },
  components: {
    swiper
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=110100&k=5553387',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      this.looplist = res.data.data
    })
    // 注意这里等号右边不要加()，这里是赋予window.onscroll一个函数，而不是方法的返回值
    // 表示：(鼠标滚动)window.onscroll一直监听着handleScroll事件
    window.onscroll = this.handleScroll
  },
  beforeDestroy () {
   //由于是单页面开发，跳转任何页面都会触发window.onscroll事件。因此这里将离开该页面//  时，置空window.onscroll
    window.onscroll = null
  },
  methods: {
    handleScroll () {
      // 重点：当滚动距离超过轮播图高度，则给加类名，添加固定顶部的样式
      if (document.documentElement.scrollTop >= this.$refs.myswiper.$el.offsetHeight) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
  }
}
</script>

FilmHeader.vue（组件被引入：主页.vue）

<template>
  <!-- 主页.vue引用该组件上加类名，相当于这里最外层div加上了该类名 -->
  <div>
    <ul>
      <router-link to="/film/nowplaying" tag="li" activeClass="active">正在热映</router-link>
      <router-link to="/film/comingsoon" tag="li" activeClass="active">即将上演</router-link>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.active{
  color:red;
  border-bottom: 2px solid red;
}

//主页.vue中引用组件上加类名，在组件中对该类名进行css操作
.fixed{
  position: fixed;
  left:0px;
  top:0px;
  width:100%;
  height:40px;
  background:white;
}
</style>