收藏
回答

安卓滚动事件中使用setData,渲染延迟问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug scroll-view 客户端 6.7.2.1340 2.3.0


以上代码逻辑为:监听一个scroll-view的滚动事件,滚动到一定程度时setData一次,不会有连续setData;

如果滚动的时候按住滚动,一段时间后才放开,打印出来的时间差会很大;

如果滚动的时候是滑动一点则放开,然后再次滑动,打印出来的时间差就会比较小;

以上问题只有在安卓机上会出现,估计是在滚动时,setData的渲染会延迟到本次滚动结束才会进行。

在写吸顶效果,返回顶部时经常会用到滚动事件监听,这个有办法解决吗??

官方人员看下,之前社区也好多关于吸顶的帖子,都是同样的问题,至今没找到解决方案。


2019.1.14补充:

问题已解决;解决方案:

在相应的页面配置的json文件中加入以下代码

{

  "usingComponents": {}

}

至于为什么,可以参考

https://developers.weixin.qq.com/community/develop/doc/0006a6c1bc4aa88ebcd73fb7156400

最后一次编辑于  01-14  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

9 个回答

  • 简
    01-12

    同样遇到这个问题,想要做个滑动到顶部一段距离的动态吸顶效果,页面滚动一段时间后,再setData,延迟好久。

    不管是用WXML节点相交,还是在页面的onPageScroll中监听,只要是滑动过后再setData,都有这个问题,好难受

    01-12
    赞同
    回复 3
    • 简
      01-12

      已经找到解决方法

      给页面对应的 `.json` 文件(即页面的配置文件),添加如下配置,即可解决问题。

      {

        "config": {

          "usingComponents": {}

        }

      },

      如果是原生写的话,不要config这一层。我用mpvue 写的打包出来的文件,就没有config这一层 了。


      参考:

      https://developers.weixin.qq.com/community/develop/doc/0006a6c1bc4aa88ebcd73fb7156400



      01-12
      回复
    • 林文彬
      林文彬
      01-14回复

      这也太神奇了吧,真的解决问题了

      01-14
      回复
    • 简
      01-14回复林文彬

      确实很神奇,我也一脸懵逼

      01-14
      回复
  • 不是我而是风
    不是我而是风
    01-07

    不知道他们怎么做的啊,也没有源码,哭

    01-07
    赞同
    回复
  • 双木林
    双木林
    2018-12-27

    好坑啊,,,我在ios上做了个贼酷炫的吸顶效果,结果安卓一测试,就跟狗屎一样卡;

    2018-12-27
    赞同
    回复
  • 炮
    2018-11-13

    美团小程序这个效果做出来了,不知如何实现的

    2018-11-13
    赞同
    回复
  • 三盈蛇第一帅炮
    三盈蛇第一帅炮
    2018-10-19

    请问这问题解决了吗?我也遇到一样的问题

    2018-10-19
    赞同
    回复 2
    • 林文彬
      林文彬
      2018-10-22

      没有,我这边砍掉这个功能了;

      要实现吸顶效果,目前看来只有web-view嵌网页可以实现,京东和唯品会也是这么做的;

      如果想要做回到顶部按钮,可以给按钮加一个动画,效果勉强可以接受。


      2018-10-22
      回复
    • 润飞
      润飞
      2018-11-06回复林文彬

      哎,我他妈也想做一个,他妈丑程序垃圾,这个东西都解不了,垃圾,真他妈垃圾

      2018-11-06
      回复
  • 尚
    2018-09-19

    scroll-view的滚动事件中的scrollTop不是距离scroll-view顶部的距离吧,好像是一次滚动的滚动距离;

    你可以试试view的onPageScroll事件

    2018-09-19
    赞同
    回复 1
    • 林文彬
      林文彬
      2018-09-19

      onPageScroll试过了,WXML监听节点交互(关闭滚动监听)也试过了,最后都是要setData,都是滚动时setData渲染延迟;

      scrollTop到顶部一定距离会触发一次,没办法拿来做吸顶;

      2018-09-19
      回复
  • 永泉_
    永泉_
    2018-09-19

    楼主这个问题解决了吗?

    在android上不断setData会出现一些性能问题。

    做了个九宫格抽奖的效果,在70~200ms的间隔内不断的setData改变格子的active状态,在ios上能正常显示,在android下会出现跳格现象,就是有些格子的active状态还没显示就跳过了。

    2018-09-19
    赞同
    回复 1
    • 林文彬
      林文彬
      2018-09-19

      没有解决TAT。。而且我的问题和你的应该不大一样,

      我在滚动过程中只会触发一次setData,

      你这个是连续setData导致的。

      2018-09-19
      回复
  • 坤
    2018-09-19

    官方还没有解决方案,等吧

    2018-09-19
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2018-09-17

    我用的节点交互做的,还不错

    https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html

    2018-09-17
    赞同
    回复 8
    • 林文彬
      林文彬
      2018-09-17

      在安卓机上表现正常吗?

      我做吸顶效果的时候尝试过这种方案,和监听滚动事件一模一样的表现,

      用节点交互最后一步肯定也需要setData,在滚动时依旧会出现问题,

      所以我才猜想是滚动过程中setData的渲染延迟问题,和滚动事件无关。

      我参考了很多小程序,几乎找不到一个吸顶效果的,京东的那个吸顶是用web-view做的。


      2018-09-17
      回复
    • 卢霄霄
      卢霄霄
      2018-09-17回复林文彬

      我没有在特别复杂的页面尝试。。页面没加滚动监听,就不会造成 setData延迟吧。。安卓上滚动的时候,你可以在真机上看看 vconsole里,就是积累了超大量的事件触发

      2018-09-17
      回复
    • 林文彬
      林文彬
      2018-09-17回复卢霄霄

      我用WXML方案做吸顶的时候,关闭了滚动监听事件;

      用WXML判断某个节点消失在屏幕内的时候,进行一次setData,发现还是会有渲染延迟;

      放弃了做吸顶效果,然后现在又要做滚动返回顶部,又遇到同样的问题ORZ。

      2018-09-17
      回复
    • 卢霄霄
      卢霄霄
      2018-09-17回复林文彬

      渲染延迟大概多大呢?不应该是小时在屏幕内,应该是到达顶部

      2018-09-17
      回复
    • 林文彬
      林文彬
      2018-09-17回复卢霄霄

      安卓机子上大部分时间延迟会有1000-2000ms,偶尔又会20ms左右,对用户体验影响很大。

      对,我是判断吸顶元素的上面那个元素不可见的时候,再设置吸顶元素为fixed,原理是一样的。

      2018-09-17
      1
      回复
    查看更多(3)