关于position: sticky在小程序中IOS真机下偶然失效的问题总结

虽然小程序中有大把的自定义sticky组件可用,原理无非是监听页面滚动改变position来实现,实际体验上卡顿感难以避免,跟原生的position: sticky比还是有很大距离。
最近写的页面已经开始逐渐用上原生position: sticky,在测试中发现IOS真机下,某些场景的sticky会失效,花了点时间研究,得出来以下结论:

  1. IOS必须加上position: -webkit-sticky;
  2. IOSsticky的元素必须与占位元素在同一个作用域下面,才生效

直接在页面中写sticky有效

page.wxml
title
sticky

sticky定义在组件内,占位元素在页面里,安卓及模拟器有效,IOS真机无效

components.wxml
sticky
page.wxml
title


sticky定义在组件内,占位元素在组件插槽内,有效

components.wxml
sticky
page.wxml
title

  

第二个真的是神坑,还好可以通过第三个办法解决

你可能感兴趣的:(关于position: sticky在小程序中IOS真机下偶然失效的问题总结)