CrazyAz
CrazyAz
  • 发布:2023-11-28 15:15
  • 更新:2023-11-28 16:02
  • 阅读:291

u-sticky 怎么默认一直吸顶状态

分类:uni-app

u-sticky 怎么默认一直吸顶状态,比如页面一些头部筛选栏默认就在0定位,页面进来后就想让他固定悬浮,但是sticky是需要滚动条变化后才触发悬浮,会导致页面筛选栏出现抖动情况。

2023-11-28 15:15 负责人:无 分享
已邀请:
CrazyAz

CrazyAz (作者) - 14届毕业的废材

研究了个方法不需要改动源码
二次封装成组件

<template>  
    <!-- 二次封装u-sticky 组件 初始化后就固定吸顶悬浮 -->  
    <u-sticky ref="topSticky" :bg-color="bgColor" :enable="false" :offset-top="offsetTop" >  
        <slot></slot>  
    </u-sticky>  
</template>  

<script>  
    export default {  
        props: {  
            // 吸顶容器到顶部某个距离的时候,进行吸顶,在H5平台,NavigationBar为44px  
            offsetTop: {  
                type: [Number, String],  
                default: 0  
            },  
            // 吸顶区域的背景颜色  
            bgColor: {  
                type: String,  
                default: '#ffffff'  
            },  
        },  
        name:"az-u-sticky",  
        data() {  
            return {  

            };  
        },  
        mounted() {  
            // 吸顶栏默认让它一直吸顶,不需要等到滚动条滚动再吸顶  
            this.$nextTick(() =>{  
                this.$refs.topSticky.$uGetRect('.' + this.$refs.topSticky.elClass).then((res) => {  
                    this.$refs.topSticky.height = res.height;  
                    this.$refs.topSticky.left = res.left;  
                    this.$refs.topSticky.width = res.width;  
                })  
                this.$refs.topSticky.fixed = true  
                this.$refs.topSticky.stickyTop = this.rpxToPx(this.offsetTop)  
            })  
        },  
        methods: {  
            rpxToPx(rpx) {  
                const screenWidth = uni.getSystemInfoSync().screenWidth  
                return (screenWidth * Number.parseInt(rpx)) / 750  
            }  
        }  
    }  
</script>

要回复问题请先登录注册