增加逻辑：

1.当吸顶的时候增加一个div标签占位，可让过度更加顺滑（原有逻辑当到达顶部的时候会会变成绝对定位，后面的标签就会立即顶上去，会有跳动的过程，体验不佳）

增加逻辑：
1.当吸顶的时候增加一个div标签占位，可让过度更加顺滑（原有逻辑当到达顶部的时候会会变成绝对定位，后面的标签就会立即顶上去，会有跳动的过程，体验不佳）
崔琼雪
1 parent 52830ca6
Showing 2 changed files with 26 additions and 4 deletions Show diff stats
examples/routers/affix.vue
src/components/affix/affix.vue
@@ -10,12 +10,24 @@
     }
 </style>
 <template>
+<div>
     <Affix>
-        <span class="demo-affix">固定在最顶部</span>
+        <div class="demo-affix">固定在最顶部</div>
     </Affix>
+    <div v-for="(item,index) in arr">{{item}}</div>
+</div>
 </template>
 <script>
     export default {
-
+        data(){
+            return {
+                arr: []
+            }
+        },
+        created(){
+            for(let i = 0 ; i < 100 ; i++){
+                this.arr.push(i);
+            }
+        }
     }
 </script>
 <template>
     <div>
-        <div :class="classes" :style="styles">
+        <div ref="point" :class="classes" :style="styles">
             <slot></slot>
         </div>
+        <div v-show="slot" :style="slotStyle"></div>
     </div>
 </template>
 <script>
@@ -52,7 +53,9 @@
         data () {
             return {
                 affix: false,
-                styles: {}
+                styles: {},
+                slot: false,
+                slotStyle: {}
             };
         },
         computed: {
@@ -95,6 +98,11 @@
                 // Fixed Top
                 if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
                     this.affix = true;
+                    this.slotStyle = {
+                        width: this.$refs.point.clientWidth + 'px',
+                        height: this.$refs.point.clientHeight + 'px'
+                    }
+                    this.slot = true;
                     this.styles = {
                         top: `${this.offsetTop}px`,
                         left: `${elOffset.left}px`,
@@ -103,6 +111,8 @@
                     this.$emit('on-change', true);
                 } else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
+                    this.slot = false;
+                    this.slotStyle = {};
                     this.affix = false;
                     this.styles = null;