sticky

sticky吸顶容器

组件结构

<template>
    <view class="tui-sticky-class">
        <!--sticky 容器-->
        <view :class="[isFixed === true ? 'tui-sticky-fixed' : '']">
            <slot name="header"></slot>
        </view>
        <!--sticky 容器-->
        <!--内容-->
        <slot name="content"></slot>
    </view>
</template>

组件脚本

<script>
    export default {
        name: "tuiSticky",
        props: {
            scrollTop: {
                type: Number
            }
        },
        watch: {
            scrollTop(newValue, oldValue) {
                this.updateStickyChange();
            }
        },
        // #ifdef H5
        mounted() {
            this.updateScrollChange();
        },
        // #endif
        onReady() {
            this.updateScrollChange();
        },
        data() {
            return {
                timer: null,
                top: 0,
                height: 0,
                isFixed: false
            };
        },
        methods: {
            updateStickyChange() {
                const top = this.top;
                const height = this.height;
                const scrollTop = this.scrollTop
                this.isFixed = (scrollTop >= top && scrollTop < top + height) ? true : false
            },
            updateScrollChange() {
                if (this.timer) {
                    clearTimeout(this.timer)
                    this.timer = null
                }
                this.timer = setTimeout(() => {
                    const className = '.tui-sticky-class';
                    const query = uni.createSelectorQuery().in(this);
                    query.select(className).boundingClientRect((res) => {
                        if (res) {
                            this.top = res.top;
                            this.height = res.height
                        }
                    }).exec()
                }, 0)
            }
        }
    }
</script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "scrollTop" : 滚动条距离顶部距离,类型:"Number"

 methods:
   "updateStickyChange":scrollTop与元素top比较，判断元素是否吸顶
   "updateScrollChange"：获取元素的top值，以及height值

示例

... 此处省略n行,下载源码查看