關於position: sticky在小程序中IOS真機下偶然失效的問題總結

雖然小程序中有大把的自定義sticky組件可用，原理無非是監聽頁面滾動改變position來實現，實際體驗上卡頓感難以免，跟原生的position: sticky比仍是有很大距離。
最近寫的頁面已經開始逐漸用上原生position: sticky，在測試中發現IOS真機下，某些場景的sticky會失效，花了點時間研究，得出來如下結論：

1. IOS必須加上position: -webkit-sticky;
2. 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>

第二個真的是神坑，還好能夠經過第三個辦法解決