position: sticky在小程序中IOS真机下偶然失效的问题
目录
虽然小程序中有大把的自定义sticky
组件可用,原理无非是监听页面滚动改变position
来实现,实际体验上卡顿感难以避免,跟原生的position: sticky
比还是有很大距离。
最近写的页面已经开始逐渐用上原生position: sticky
,在测试中发现IOS
真机下,某些场景的sticky
会失效,花了点时间研究,得出来以下结论:
IOS
必须加上position: -webkit-sticky;
IOS
下sticky
的元素必须与占位元素在同一个作用域
下面,才生效
直接在页面中写 sticky 有效
page.wxml
<view style="height: 100px">title</view> <view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view> <view style="height: 200vh"></view>
sticky 定义在组件内,占位元素在页面里,安卓及模拟器有效,IOS 真机无效
components.wxml
<view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view>
page.wxml
<view style="height: 100px">title</view> <components/> <view style="height: 200vh"></view>
sticky 定义在组件内,占位元素在组件插槽内,有效
components.wxml
<view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view> <slot/>
page.wxml
<view style="height: 100px">title</view> <components> <view style="height: 200vh"></view> </components>
第二个真的是神坑,还好可以通过第三个办法解决。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » position: sticky在小程序中IOS真机下偶然失效的问题
码云笔记 » position: sticky在小程序中IOS真机下偶然失效的问题
![](https://media.mybj123.com/wp-content/uploads/2024/02/1706962282-d2a91681b352c3a.png)