V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
cyy564
V2EX  ›  问与答

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

  •  
  •   cyy564 · 2021-04-01 11:41:47 +08:00 · 1534 次点击
    这是一个创建于 1092 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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-04-01 12:05:22 +08:00
    @heasy 他那个是根据高度进行缩放,我想知道如何监听用户下滑到一定的高度,然后再进行动画
    ibegyourpardon
        3
    ibegyourpardon  
       2021-04-01 14:13:32 +08:00
    小程序的 onPageScroll 我没用过,目测和浏览器环境下用法差不多。

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

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

    你可以计算 e.scrollTop 来决定要不要开始执行动画。
    但应该不能在里面用不停的去 setData 的方法来做,会有严重的性能问题。它更应该是一个触发开关,开关打开后去调一次动画。
    qiayue
        5
    qiayue  
       2021-04-01 14:22:17 +08:00
    @misdake 居然真有这接口
    loveToMy1
        6
    loveToMy1  
       2021-04-01 14:42:07 +08:00
    占个楼 我也在找
    journalistFromHK
        7
    journalistFromHK  
       2021-04-01 14:47:01 +08:00
    animate keyframes 吧
    cyy564
        8
    cyy564  
    OP
       2021-04-01 15:03:29 +08:00
    @misdake 谢谢,看了一下样例,就是这种效果
    play78
        9
    play78  
       2021-04-01 15:45:47 +08:00
    six
    coreki
        10
    coreki  
       2021-04-01 23:59:21 +08:00 via Android
    刚好我最近也在做这个效果
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1585 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:55 · PVG 00:55 · LAX 09:55 · JFK 12:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.