微信小程序`类吸顶`方式的实现坎坷路?

这是个请教贴

问题描述

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

现状

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

html + css 实现 sticky_header

小程序中通过createIntersectionObserver实现的效果如下,同时可参考代码片段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);
});

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问