增加逻辑:

1.当吸顶的时候增加一个div标签占位,可让过度更加顺滑(原有逻辑当到达顶部的时候会会变成绝对定位,后面的标签就会立即顶上去,会有跳动的过程,体验不佳)
This commit is contained in:
崔琼雪 2017-12-15 15:40:41 +08:00
parent 52830ca693
commit 87c343e461
2 changed files with 26 additions and 4 deletions

View file

@ -10,12 +10,24 @@
} }
</style> </style>
<template> <template>
<div>
<Affix> <Affix>
<span class="demo-affix">固定在最顶部</span> <div class="demo-affix">固定在最顶部</div>
</Affix> </Affix>
<div v-for="(item,index) in arr">{{item}}</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data(){
return {
arr: []
}
},
created(){
for(let i = 0 ; i < 100 ; i++){
this.arr.push(i);
}
}
} }
</script> </script>

View file

@ -1,8 +1,9 @@
<template> <template>
<div> <div>
<div :class="classes" :style="styles"> <div ref="point" :class="classes" :style="styles">
<slot></slot> <slot></slot>
</div> </div>
<div v-show="slot" :style="slotStyle"></div>
</div> </div>
</template> </template>
<script> <script>
@ -52,7 +53,9 @@
data () { data () {
return { return {
affix: false, affix: false,
styles: {} styles: {},
slot: false,
slotStyle: {}
}; };
}, },
computed: { computed: {
@ -95,6 +98,11 @@
// Fixed Top // Fixed Top
if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) { if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
this.affix = true; this.affix = true;
this.slotStyle = {
width: this.$refs.point.clientWidth + 'px',
height: this.$refs.point.clientHeight + 'px'
}
this.slot = true;
this.styles = { this.styles = {
top: `${this.offsetTop}px`, top: `${this.offsetTop}px`,
left: `${elOffset.left}px`, left: `${elOffset.left}px`,
@ -103,6 +111,8 @@
this.$emit('on-change', true); this.$emit('on-change', true);
} else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) { } else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
this.slot = false;
this.slotStyle = {};
this.affix = false; this.affix = false;
this.styles = null; this.styles = null;