Vue 置頂元件FixedTopWrap 支援自定義內容置頂

背景

最近專案在實現置頂功能時，由於原使用的雙標籤替換實現存在狀態不一致的問題，所以考慮僅用單標籤實現，避免狀態問題。同時由於多處使用，所以簡單實現了這一元件。使用上只要像`<div>`一樣包裹需要被置頂的內容即可。

效果

使用示例

<template>
  <div>
    <fixed-top-wrap>
        <div>置頂內容</div>
    </fixed-top-wrap>
     ...
  </div>
</template>

<script>
import FixedTopWrap from '@/components/FixedTopWrap';

export default {
  data() {
    return {};
  },
  components: {
    FixedTopWrap,
  }
};
</script>

<style scoped>
</style>
複製程式碼

原始碼

<template lang="html">
  <!--置頂條目父佈局-->
  <div id="fix-scroll-watch" ref="fixScrollWatch" class="fixScrollWatch" :style="fixStyle"> <!--用於監聽滾動位置-->
    <div ref="topFixBarFixed" :class="topFixBarFixed ? 'topFixBarFixed' : ''" class="fix-index"> <!--用於固定位置-->
      <slot/> <!--實際內容-->
    </div>
  </div>
</template>

<script>
/**
  * 〖Author〗 MiWi.LIN ＾＾＾＾〖E-mail〗 80383585@qq.com
  * ======================================================== Copyright(c) 2018/11/23 ==
  * 〖Version〗 1.0 <BR/>
  * 〖Date〗 2018/11/23_下午4:31 <BR/>
  * 〖Desc〗 自動固頂 <BR/>
  * 〖Modify By〗 <BR/>
  */
export default {
  data() {
    return {
      topFixBarFixed: false,
      isMounted: false,
    };
  },
  computed: {
    fixStyle() {
      if (this.isMounted) {
        const h = this.$refs.topFixBarFixed.offsetHeight;
        return { height: `${h}px` };
      }
      return {};
    },
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // const fix = document.querySelector('#fix-scroll-watch');
      const fix = this.$refs.fixScrollWatch;
      const offsetTop = fix ? fix.offsetTop : 0;
      this.topFixBarFixed = scrollTop > offsetTop;
    },
  },
  mounted() {
    this.isMounted = true;
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
};
</script>

<style scoped lang="postcss">
  .fixScrollWatch {
    & .fix-index {
        z-index: 99;
        background-color: white;
      }
    & .topFixBarFixed {
      width: 100%;
      position: fixed;
      top: 0;
    }
  }
複製程式碼

沒啥新東西，主要還是監聽window scroll事件和slot使用。 寫此文時，搜尋置頂元件，很意外看到vue滑動頁面選單欄置頂，瞭解到 position: sticky 這一style也能輕易實現，但有相容問題，有興趣的可以瞭解下position sticky的相容。

附送

小程式版無限滾動日期Tab元件：GitHub