鍍金池/ 問答/HTML/ 微信小程序列表能否實(shí)現(xiàn) sticky header 效果？

微信小程序列表能否實(shí)現(xiàn) sticky header 效果？

就像 iOS 的列表一樣，上滑的時(shí)候每個(gè) section 的 header 固定，直到滾動(dòng)到下一個(gè) section 的時(shí)候下一個(gè) header 把上一個(gè) header「頂走」。

類似 https://codepen.io/chrissp26/...

鑒于小程序沒有 DOM 相關(guān) API，不知道如何實(shí)現(xiàn)這種效果。

Update: 我看到京東小程序的首頁有類似效果，所以理論上是可以做到的？另，非回答類的回復(fù)請(qǐng)直接在問題下評(píng)論，不要開回答。

回答
編輯回答
有點(diǎn)壞

1.4.0 小程序開始有 WXML節(jié)點(diǎn)信息的API

可以通過這個(gè)來進(jìn)行操作。

里面有一個(gè)boundingClientRect 不正是可以利用的API？

https://mp.weixin.qq.com/debu...

2017年7月27日 02:08
編輯回答
菊外人

css3新增的一個(gè)position屬性可以直接實(shí)現(xiàn)sticky的效果
在你的header中加上

{
  position: sticky;
  top: 0;
}

就可以了

2018年5月22日 06:56
編輯回答
疚幼

小程序里沒有dom 這點(diǎn)你想一下

2017年10月2日 01:34
編輯回答
怣人

微信小程序是個(gè)相對(duì)封閉的開發(fā)環(huán)境，不允許加載第三方插件。
所以如果想實(shí)現(xiàn)插件效果，要么就是看插件源碼，理解了原理后，通過原生方法模擬出來。

2017年3月21日 23:21
編輯回答
夢囈

既然微信小程序支持 js，可以自己參考其他 js 插件寫一個(gè)

2018年4月26日 15:26
編輯回答
別逞強(qiáng)

蘋果下可以用sticky布局，蘋果很流暢，android不支持sticky，只能用boundingClientRect，體驗(yàn)很差

2018年4月7日 19:06