小程序实现“类吸顶”效果交流处

这是个请教贴

问题描述

前不久参考了手机通讯录、QQ联系人列表等展示效果，意欲在小程序中实现同样类吸顶效果(暂时就这么称呼吧，不知道有没有什么专业术语来描述这一样式)。目前已经使用html + css实现了浏览器端的效果，主要是采用了css的sticky，问题在于微信不支持这个方式。无奈之下，各种尝试后，发现了createIntersectionObserver，通过对标题栏的各种状态操作，实现类吸顶效果，在模拟器上预览还凑活的过去，一旦使用安卓手机预览，就卡到无法忍受的地步了。

现状

html + css实现方式可见此处sticky_header

小程序中通过createIntersectionObserver实现的效果如下，同时可参考代码片段sticky_header

吐露心声

在这里请教诸位同道中人，是不是我在小程序中的方向走错了，不知大家有什么好的实现方式或者idea，还望诸位不吝赐教。

写在最后

放一下小程序实现时的关键性代码，节省大神们的时间

this._observerFooter = wx.createIntersectionObserver(this, { thresholds: [1], observeAll: true });
this._observerHeader.relativeToViewport().observe('.sticky_sentinel--top', (res) => {
  if (res.intersectionRatio == 0 && res.boundingClientRect.top < 0) {
    console.log('----item--allhidden--', res);
    this.setData({
      ['positions[' + res.id.replace('sticky_sentinel--top', '') + ']']: 'fixed'
    })
  }
  if (res.intersectionRatio > 0 && res.intersectionRatio != 1) {
    console.log('----item--2show--', res);
    this.setData({
      ['positions[' + res.id.replace('sticky_sentinel--top', '') + ']']: 'absolute top'
    })
  }
  console.log(this.data);
});
复制代码

源代码在两处链接均可获得，谢谢大家了。

也可在此处找到同一主题帖带我去