vue 移動端吸頂效果

在移動端中，吸頂效果是非常常見的，在這裏將它封裝成了一個組件，如果在項目中有很多地方要用到，就把它放到src/common裏面，使用也非常的簡單（源碼在最下面）

1.使用方法

爲了方便演示，這裏使用了for循環的方法將屏幕撐滿，直接將全部代碼複製到你的編輯器上運行就能看到效果

<template>
    <div>
        <ul>
            <li v-for="(item,index) in headerData" :key="index">{{item}}</li>
        </ul>
         <sticky-slot class="stickyTop">  <!--加一個class-->
            <div class="tab">
                假裝這是一個tab欄，當頁面滾動的時候要固定在頂部
            </div>
        </sticky-slot>
        <ul>
            <li v-for="(item,index) in footerData" :key="index">{{item}}</li>
        </ul>
    </div>
</template>
<script>
import stickySlot from './stickySlot'
export default {
   data(){
       return{
            headerData : [],
            footerData : []
       }
   },
    created(){
        for(let i=0;i<20;i++){
            this.headerData.push('第'+ i + '條數據')
        };
        for(let i=20;i<80;i++){
            this.footerData.push('第'+ i + '條數據')
        }
    },
    components:{
       stickySlot
    }
}
</script>
<style>
    .stickyTop{
        top:0; /*top的值是距離頂部多少固定*/
        z-index:10;
    }
    .tab{
        height:30px;
        line-height: 30px;
        background-color:greenyellow;
    }
</style>

效果圖

到達頂部的時候固定在頂部，內容部分繼續滾動

sticky源碼（兼容）

<template>
    <div class="sticky" :style="getPosition">
        <div class="sticky-warp">
            <slot></slot>
        </div>
    </div>
</template>
<script type="text/babel">
  export default {
    data () {
      return {}
    },
    computed: {
      getPosition(){
        var position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative';
        return 'position:' + position;
      }
    },
    props: {},
    beforeMount () {
    },
    mounted(){
      this.init();
    },
    deactivated(){
        if(this.cssSupport('position', 'sticky')) {
            return;
        }
      /*復位*/
        var elWarp = this.$el.querySelector('.sticky-warp');
        elWarp.position = 'absolute';
    },
    methods: {
      init(){
        if (this.cssSupport('position', 'sticky')) {
          return;
        }
        var el = this.$el, target = this.$el.parentNode,
            elWarp = this.$el.querySelector('.sticky-warp'),
            top = this.getNumberValue(document.defaultView.getComputedStyle(el).top);
        this.addScrollListen(target, (event)=> {
          if (el.getBoundingClientRect().top <= top) {
            elWarp.style.position = 'fixed';
          }
          if (el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute') {
             elWarp.style.position = 'absolute';
          }
        })
      },
      cssSupport: function (attr, value) {
        var element = document.createElement('div');
        if (attr in element.style) {
            element.style[attr] = value;
            return element.style[attr] === value;
        } else {
            return false;
        }
      },
      getNumberValue(pxValue){
            var value = String(pxValue).match(/^\-?\+?[0-9]+/g);
            return value ? Number(value) : undefined;
      },
      addScrollListen(target, cb){
        target.addEventListener('y-scroll', (event)=> {
            cb && cb(event);
        });
      }
    },
  }
</script>

<style>
    .sticky {
         width: 100%;
     }
    .sticky .sticky-warp {
      width: 100%;
      background: inherit;
      will-change: change;
      height: inherit;
      top: inherit;
    }
</style>