增加逻辑:
1.当吸顶的时候增加一个div标签占位,可让过度更加顺滑(原有逻辑当到达顶部的时候会会变成绝对定位,后面的标签就会立即顶上去,会有跳动的过程,体验不佳)
This commit is contained in:
parent
52830ca693
commit
87c343e461
2 changed files with 26 additions and 4 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue