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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1332 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

吸顶可以用 createIntersectionObserver 来实现

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

用了 onPageScroll，效果很差

有木有更好的方法

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

taro

效果

程序

实现

10 条回复 • 2021-04-01 23:59:21 +08:00

heasy

2021-04-01 11:46:01 +08:00

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

cyy564

2021-04-01 12:05:22 +08:00

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

ibegyourpardon

2021-04-01 14:13:32 +08:00

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

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

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

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