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