微信小程序列表能否实现 sticky header 效果？

Question

就像 iOS 的列表一样，上滑的时候每个 section 的 header 固定，直到滚动到下一个 section 的时候下一个 header 把上一个 header「顶走」。

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

鉴于小程序没有 DOM 相关 API，不知道如何实现这种效果。

Update: 我看到京东小程序的首页有类似效果，所以理论上是可以做到的？另，非回答类的回复请直接在问题下评论，不要开回答。

Answer 1

1.4.0 小程序开始有 WXML节点信息的API

可以通过这个来进行操作。

里面有一个boundingClientRect 不正是可以利用的API？

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

Answer 2

微信小程序是个相对封闭的开发环境，不允许加载第三方插件。
所以如果想实现插件效果，要么就是看插件源码，理解了原理后，通过原生方法模拟出来。

Answer 3

小程序里没有dom 这点你想一下

Answer 4

既然微信小程序支持 js，可以自己参考其他 js 插件写一个

Answer 5

css3新增的一个position属性可以直接实现sticky的效果
在你的header中加上

{
  position: sticky;
  top: 0;
}

就可以了

Answer 6

苹果下可以用sticky布局，苹果很流畅，android不支持sticky，只能用boundingClientRect，体验很差