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

This topic created in 1885 days ago, the information mentioned may be changed or developed.

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

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

吸顶可以用 createIntersectionObserver 来实现

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

用了 onPageScroll，效果很差

有木有更好的方法

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

taro

效果

程序

实现

10 replies • 2021-04-01 23:59:21 +08:00

heasy

Apr 1, 2021

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

cyy564

Apr 1, 2021

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

ibegyourpardon

Apr 1, 2021

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

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

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

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