前不久参考了手机通讯录、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); });
源代码在两处链接均可获得,谢谢大家了。