请教前端大大们一个小程序的效果实现方法

[cyy564]

http://static.cangyuanyuan.com/ezgif.com-gif-maker.gif

直接上图，看准网的小程序

吸顶可以用 createIntersectionObserver 来实现

下滑过程中 logo 和搜索框如何实现如此平滑的变化效果

用了 onPageScroll，效果很差

有木有更好的方法

还有一点，我用的 taro，没用原生

[heasy]

https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scale.html

[cyy564]

@heasy 他那个是根据高度进行缩放，我想知道如何监听用户下滑到一定的高度，然后再进行动画

[ibegyourpardon]

小程序的 onPageScroll 我没用过，目测和浏览器环境下用法差不多。

使用 onPageScroll()方法，该函数有一个参数 e，通过 e.scrollTop 可以访问你所滚动的高度。

onPageScroll: function(e) {
console.log(e.scrollTop)
}

你可以计算 e.scrollTop 来决定要不要开始执行动画。
但应该不能在里面用不停的去 setData 的方法来做，会有严重的性能问题。它更应该是一个触发开关，开关打开后去调一次动画。

[misdake]

https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html#%E6%BB%9A%E5%8A%A8%E9%A9%B1%E5%8A%A8%E7%9A%84%E5%8A%A8%E7%94%BB

[qiayue]

@misdake 居然真有这接口

[loveToMy1]

占个楼 我也在找

[journalistFromHK]

animate keyframes 吧

[cyy564]

@misdake 谢谢，看了一下样例，就是这种效果

[play78]

six

[coreki]

刚好我最近也在做这个效果