Vue组件设计-Sticky布局效果示例
作者：aiguangyuan
这篇文章主要介绍了Vue组件设计-Sticky布局,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue组件设计-Sticky布局
Sticky布局即为粘性定位，常见于一些重要的页面区域在向上滚动时不会被卷起来，在CSS中可以通过设置position:sticky来实现这一功能，但是如果出于兼容性考虑或是一些复杂的场景，就需要我们用传统的方法来实现，以下基于Vue封装一个组件给大家参考。
1. 效果示例
2. 组件封装
<template>
<div :style="{height:height + 'px', zIndex: zIndex }">
<div
:class="className"
:style="{
width: width,
zIndex: zIndex,
position: position,
height: height + 'px',
top: isSticky ? stickyTop + 'px' : '',
}">
<slot>
</slot>
</div>
</div>
</template>
<script>
export default {
name: "Sticky",
props: {
stickyTop: {
type: Number,
default: 0,
},
zIndex: {
type: Number,
default: 1,
},
className: {
type: String,
default: "",
},
},
data() {
return {
position: "",
active: false,
isSticky: false,
width: undefined,
height: undefined,
};
},
mounted() {
this.height = this.$el.getBoundingClientRect().height;
window.addEventListener("scroll", this.handleScroll);
window.addEventListener("resize", this.handleResize);
},
// 组件激活时调用
activated() {
this.handleScroll();
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
window.removeEventListener("resize", this.handleResize);
},
methods: {
sticky() {
if (this.active) {
return;
}
this.active = true;
this.isSticky = true;
this.position = "fixed";
this.width = this.width + "px";
},
handleReset() {
if (!this.active) {
return;
}
this.reset();
},
reset() {
this.position = "";
this.width = "auto";
this.active = false;
this.isSticky = false;
},
handleScroll() {
// 粘性定位区域的宽度
const width = this.$el.getBoundingClientRect().width;
this.width = width || "auto";
// 粘性定位距屏幕顶部的高度
const offsetTop = this.$el.getBoundingClientRect().top;
// 如果滚动高度小于设定的定位高度
if (offsetTop < this.stickyTop) {
this.sticky();
return;
};
this.handleReset();
},
handleResize() {
if (this.isSticky) {
this.width = this.$el.getBoundingClientRect().width + "px";
}
},
},
};
</script>3. 组件使用
<template>
<div style="height:2000px;">
<div style="height:200px;background-color:green"></div>
<Sticky>
<div style="height:300px;background-color:red;line-height:300px;text-align:center;font-size:30px;">
这是定位区域
</div>
</Sticky>
</div>
</template>
<script>
import Sticky from "@/components/Sticky";
export default {
components:{
Sticky:Sticky
}
};
</script>到此这篇关于Vue组件设计-Sticky布局的文章就介绍到这了,更多相关Vue Sticky布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！