由position: sticky引出的问题,最近在小程序顶部导航组件用了sticky做吸顶,sticky有个限制是,做定位的元素,外部不能再用一个普通的块包裹,否则sticky无效。
现有页面代码大概是:
<page>
<view style="position: relative;">
<component><</component>>
</view>
</page>
组件代码大概是:
<view style="position: sticky; height: {{height}}; background-color: {{background}}"></view>
发现,开发工具以及安卓环境下吸顶正常,ios无效。经测试,把在自定义组件外面包多一层,让父元素sticky,而组件本身不定位,则所有环境都有效。
结合上面提到的小程序内sticky的限制,猜想是不是因为ios渲染组件时,多插入了一个父元素,所以才导致了吸顶无效?然后打开调试看看节点,看到虽然安卓和ios都有这样一层,却有所不同。。。
抽空写了下代码片段
https://developers.weixin.qq.com/s/gKr8Y1mb7td3
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。