这是个请教贴
问题描述
前不久参考了手机通讯录、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);
});
源代码在两处链接均可获得,谢谢大家了。
也可在此处找到同一主题帖带我去