wxapp/uview-ui/components/u-sticky/u-sticky.vue

<template>
    <view class="">
        <view class="u-sticky-wrap" :class="[elClass]" :style="{
            height: fixed ? height + 'px' : 'auto',
            backgroundColor: bgColor
        }">
            <view class="u-sticky" :style="{
                position: fixed ? 'fixed' : 'static',
                top: stickyTop + 'px',
                left: left + 'px',
                width: width == 'auto' ? 'auto' : width + 'px',
                zIndex: uZIndex
            }">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script>
    /**
     * sticky 吸顶
     * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
     * @tutorial https://www.uviewui.com/components/sticky.html
     * @property {String Number} offset-top 吸顶时与顶部的距离，单位rpx（默认0）
     * @property {String Number} index 自定义标识，用于区分是哪一个组件
     * @property {Boolean} enable 是否开启吸顶功能（默认true）
     * @property {String} bg-color 组件背景颜色（默认#ffffff）
     * @property {String Number} z-index 吸顶时的z-index值（默认970）
     * @property {String Number} h5-nav-height 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px（默认44）
     * @event {Function} fixed 组件吸顶时触发
     * @event {Function} unfixed 组件取消吸顶时触发
     * @example <u-sticky offset-top="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
     */
    export default {
        name: "u-sticky",
        props: {
            // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
            offsetTop: {
                type: [Number, String],
                default: 0
            },
            //列表中的索引值
            index: {
                type: [Number, String],
                default: ''
            },
            // 是否开启吸顶功能
            enable: {
                type: Boolean,
                default: true
            },
            // h5顶部导航栏的高度
            h5NavHeight: {
                type: [Number, String],
                default: 44
            },
            // 吸顶区域的背景颜色
            bgColor: {
                type: String,
                default: '#ffffff'
            },
            // z-index值
            zIndex: {
                type: [Number, String],
                default: ''
            }
        },
        data() {
            return {
                fixed: false,
                height: 'auto',
                stickyTop: 0,
                elClass: this.$u.guid(),
                left: 0,
                width: 'auto',
            };
        },
        watch: {
            offsetTop(val) {
                this.initObserver();
            },
            enable(val) {
                if (val == false) {
                    this.fixed = false;
                    this.disconnectObserver('contentObserver');
                } else {
                    this.initObserver();
                }
            }
        },
        computed: {
            uZIndex() {
                return this.zIndex ? this.zIndex : this.$u.zIndex.sticky;
            }
        },
        mounted() {
            this.initObserver();
        },
        methods: {
            initObserver() {
                if (!this.enable) return;
                // #ifdef H5
                this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight;
                // #endif
                // #ifndef H5
                this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) : 0;
                // #endif

                this.disconnectObserver('contentObserver');
                this.$uGetRect('.' + this.elClass).then((res) => {
                    this.height = res.height;
                    this.left = res.left;
                    this.width = res.width;
                    this.$nextTick(() => {
                        this.observeContent();
                    });
                });
            },
            observeContent() {
                this.disconnectObserver('contentObserver');
                const contentObserver = this.createIntersectionObserver({
                    thresholds: [0.95, 0.98, 1]
                });
                contentObserver.relativeToViewport({
                    top: -this.stickyTop
                });
                contentObserver.observe('.' + this.elClass, res => {
                    if (!this.enable) return;
                    this.setFixed(res.boundingClientRect.top);
                });
                this.contentObserver = contentObserver;
            },
            setFixed(top) {
                const fixed = top < this.stickyTop;
                if (fixed) this.$emit('fixed', this.index);
                else if(this.fixed) this.$emit('unfixed', this.index);
                this.fixed = fixed;
            },
            disconnectObserver(observerName) {
                const observer = this[observerName];
                observer && observer.disconnect();
            },
        },
        beforeDestroy() {
            this.disconnectObserver('contentObserver');
        }
    };
</script>

<style scoped lang="scss">
    @import "../../libs/css/style.components.scss";
    
    .u-sticky {
        z-index: 9999999999;
    }
</style>