Vue组件设计-Sticky布局

越陌度阡

发布于 2023-05-03 09:32:11

7800

发布于 2023-05-03 09:32:11

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-28，如有侵权请联系 cloudcommunity@tencent.com 删除

height