收藏
回答

onPageScroll


onPageScroll的滚动在Android机中表现很差

最后一次编辑于  2018-02-02  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

14 个回答

  • 永恒君
    永恒君
    2018-02-02

    setData 的沟通成本非常高,比 DOM 操作更烧,

    所以如果只是对错赋值的话,判断对错变化了后只 setData 一次比较好。

    2018-02-02
    赞同
    回复
  • 七夜
    七夜
    2018-02-02

    从实际出发,还有什么好的办法吗? 需求其实很简单:页面中有一个搜索框,当页面滚动超过一定距离时,让搜索框置顶。我觉得setData的地方没错啊,肯定要随着页面滚动距离的变化作相应的判断啊

    2018-02-02
    赞同
    回复
  • Zwx。
    Zwx。
    2018-03-08

    同样的问题,至今没有找到解决方案,官方也没有给出解释。感觉像是安卓只监听了页面的第一次滚动,和结束滚动。

    2018-03-08
    赞同
    回复
  • 永恒君
    永恒君
    2018-03-09

    我的意思是,每次滑动会触发十多次 onPageScroll,

    如果每次都 setData,这个性能会非常得糟糕。


    所以更推荐达成位置判断后,再进行一次值是否需要变化的判断,

    这样在十多次触发中只会有一次 setData。


    不妨你 for 个 1000 次 setData 看看效果,会非常卡顿。

    这种沟通成本可能源于小程序 webview 与 js 的分离,存在跨端通信的成本问题。

    2018-03-09
    赞同
    回复
  • 永恒君
    永恒君
    2018-03-09

    如果其中需要加动画的话,

    更推荐使用 createAnimation 来做,

    它的性能几乎和 dom 操作相近。

    2018-03-09
    赞同
    回复
  • Zwx。
    Zwx。
    2018-03-09

    @永恒君

    谢答。代码中确实已经加入了位置判断以及值的判断,当中其实也只setData了一次,但是安卓上就是会停顿一下然后再到该到的位置。

    代码如下:


    控制台如下:


    安卓真机上会出现这个情况


    tab栏会延迟大概几百毫秒的时间,到对应的位置,看了猫眼电影的电影出票儿里的电影详情页面,上面的筛选器也是在安卓下会出现这种问题,也是延迟很短的时间,然后闪到该到的位置。


    2018-03-09
    赞同
    回复 1
    • 刘亚亚
      刘亚亚
      2018-09-06

      有解决吗,朋友

      2018-09-06
      赞同
      回复
  • Zwx。
    Zwx。
    2018-03-09

    @永恒君

    感觉是安卓手机渲染视图的性能相比较于ios更差?

    2018-03-09
    赞同
    回复
  • 永恒君
    永恒君
    2018-03-09

    这个方面是不得不承认的,IOS 要更佳,无论是 scroll 的触发次数还是渲染性能上。


    我手机上的猫眼电影没看到这个吸顶的效果,

    如果是元素本来在某位置,滑动超过该位置则吸顶的话,

    css 的 position: sticky 要更佳,已测可用。(不知是不是你的需求)

    2018-03-09
    赞同
    回复
  • Zwx。
    Zwx。
    2018-03-09

    @永恒君

    你小程序搜索“电影出票儿”,点击进入电影详情就可以看到筛选器的问题。

    感谢!

    position:sticky 实测可用,虽然在安卓上快速滑动的时候还是会出现延迟,不过较于fixed已经有了很大的优化,就是不知道sticky在小程序中是否也存在兼容性问题,正在测试中。

    2018-03-09
    赞同
    回复
  • Zwx。
    Zwx。
    2018-03-09

    @永恒君

    目前没有看到设备不支持sticky,但为了防止存在,我选择了在onload()的时候通过

    if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {    // 支持 sticky}

    去判断是否支持sticky,支持就是用sticky,不支持就是用fixed。

    感谢解惑!

    2018-03-09
    赞同
    回复