封装吸顶组件
子组件:
html:
<template>
<div>
<div class="nav-bar" :class="{ is_fixed: isFixed }">你好啊, 我叫jiejie
</div>
</div>
</template>
js
主要用的是scrolltop的距离来控制是否将组件定位改为fix,只需要用原生js即可实现。
我们在vue中使用。
<script>
export default {
props: {}, // 组件参数 接收来自父组件的数据
data() {
return {
//模拟数据
isFixed: false
};2
},
created() {
//创建后
},
components: {}, // 局部注册的组件
mounted() {
//加载后
window.addEventListener("scroll", this.initHeight);
},
watch: {}, // 负责监听
computed: {}, // 计算属性
methods: {
//方法集合
initHeight() {
let scrollTop =
window.pageYOffset || document.scrollTop || document.body.scrollTop;
this.isFixed = scrollTop > 152 ? true : false;
}
},
destroyed() {
window.removeEventListener("scroll", this.initHeight);
}
};
</script>
css样式
<style scoped lang="scss">
.is_fixed {
position: fixed;
top: 0;
width: 50%;
border:2px solid #ccc;
// box-shadow: 0 5px 5px red;
}
</style>
哪个组件用在哪个里面调用