cyy564
V2EX  ›  问与答

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

By cyy564 at 2021 年 4 月 1 日 · 2594 次点击

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

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

吸顶可以用 createIntersectionObserver 来实现

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

用了 onPageScroll,效果很差

有木有更好的方法

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

10 条回复  •  2021-04-01 23:59:21 +08:00
cyy564
   2
cyy564  
OP
   2021 年 4 月 1 日
@heasy 他那个是根据高度进行缩放,我想知道如何监听用户下滑到一定的高度,然后再进行动画
ibegyourpardon
   3
ibegyourpardon  
   2021 年 4 月 1 日
小程序的 onPageScroll 我没用过,目测和浏览器环境下用法差不多。

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

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

你可以计算 e.scrollTop 来决定要不要开始执行动画。
但应该不能在里面用不停的去 setData 的方法来做,会有严重的性能问题。它更应该是一个触发开关,开关打开后去调一次动画。
qiayue
   5
qiayue  
   2021 年 4 月 1 日
@misdake 居然真有这接口
loveToMy1
   6
loveToMy1  
   2021 年 4 月 1 日
占个楼 我也在找
journalistFromHK
   7
journalistFromHK  
   2021 年 4 月 1 日
animate keyframes 吧
cyy564
   8
cyy564  
OP
   2021 年 4 月 1 日
@misdake 谢谢,看了一下样例,就是这种效果
play78
   9
play78  
   2021 年 4 月 1 日
six
coreki
   10
coreki  
   2021 年 4 月 1 日 via Android
刚好我最近也在做这个效果
© 2026 V2EX · 35ms · 3.9.8.5