Skip to content

微信小程序将顶部的元素设置sticky时,粘性会失效 #325

@Yi-Wo-Zuo

Description

@Yi-Wo-Zuo

Wot Design Uni 版本号

^1.2.20

平台

微信小程序

复现Demo地址

重现步骤

WeChat045ffd974fb8d80ce514eca379e1418d

向下滚动,这个顶部元素没有粘性功能

期望的结果是什么?

可以粘性在顶部

实际的结果是什么?

没有粘性在顶部

环境信息

其他补充信息

问题排查

这里我看了具体的源码实现我进行了断点调试,如下代码:

WeChat64a43db6eabbde9d8c0ad50ca3468e3c

这个回调函数里的boundingClientRect参数里面的top值并不是0px而是17px我就觉得很不理解

我就去看了wd-resize组件的resize方法

WeChat0d55ec1b404c00cf69336f3166dd7c3f

我在onScrollHandler里打了一个debugger,惊奇的发现当debugger触发时,使用wd-sticky组件的元素是向上有一定的距离

WeChat92a618447edbfc6ebf842d81a82c93df

看到了wd-sticky里面的动态宽高还没有内容就调用了这个方法

解决

我使用nextTick函数包裹了一些就解决,目的是为了宽高样式加上后,在获取DOM的样式

WeChatfdaca8f2f065b1cfdfaf7c4605dd8ee2

我这个方法不一定对,因为我也不清楚这个组件的具体逻辑,发出来我觉得作者有更好的解决方法

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions