收藏
回答

setData性能问题

有一个需求:小程序的页面滚动距离超过指定位置时,将一个搜索框浮现出来,小于指定位置时,则影藏起来,我现在的做法是,页面onPageScroll回调函数中,实时检测是否滚动到对应的位置,然后用setData改变搜索框的样式,控制搜索所显示还是隐藏。

但是在实际测试过程中发现,当页面滚动到指定位置时,要等上好几秒,搜索框才会显示出来,从setData执行完到界面UI刷,有好几秒的延迟,请问这要如何处理?请各位大牛帮忙提供解决方法

回答关注问题邀请回答
收藏

4 个回答

  • 小程序技术专员-june
    小程序技术专员-june
    2018-05-26

    理论上setData不应该会有好几秒这么长的延迟的,烦请提供一下机型,基础库版本和能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们这边定位一下问题。

    2018-05-26
    有用
    回复 6
    • 何海清
      何海清
      2018-05-26

      您好,我目前是在开发工具中测试的,开发工具的版本是v1.0.2.1803210,还没在真机上测试

      2018-05-26
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2018-05-26回复何海清

      那麻烦请提供一下代码片段。

      2018-05-26
      回复
    • 何海清
      何海清
      2018-05-26回复小程序技术专员-june

      /**

        * 监听页面滚动时间处理函数

        */

      onPageScroll(event) {

          this .setSearchLocation(event);

      },

      getSearchLocation(){

           //获取搜索框的dom信息

          wx.createSelectorQuery().in( this ).select( '.search' ).boundingClientRect(rect => {

           this .setData({ searchHeight: rect.height,searchTop:  '-' + rect.height +  'px' });

          }).exec();

      },

      getProductDom(){

           //获产品列表的dom信息,产品列表的位置信息

           let productDom =  this .data.productDom;

           if (!productDom) {

          productDom = wx.createSelectorQuery().in( this ).select( '.productGrid' );

           if (productDom){

               this .setData({ productDom: productDom });

              }

          }

           if (productDom){

              productDom.boundingClientRect(rect => {

               this .setData({ productTop: rect.top });

              }).exec();

          }

      },

      setSearchLocation(scroll) {

           //判断当前页面是否滚动到产品列表的位置,是则显示搜索框

           if ( this .data.productTop){

               if (scroll.scrollTop >=  this .data.productTop) {

                   this .setData({ searchTop:  '0px' });

              }  else {

                   this .setData({ searchTop:  '-' +  this .data.searchHeight +  'px' });

              }

          } else {

               this .setData({ searchTop:  '0px' });

               let productDom =  this .getProductDom(); //

          }

      }


      2018-05-26
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2018-05-26回复何海清

      请参考后续链接中文档提供一下能够复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html )。

      2018-05-26
      回复
    • 赖少爷
      赖少爷
      2018-05-28

      我也有这个问题。

      2018-05-28
      回复
    查看更多(1)
  • K_K
    K_K
    2019-02-20

    这个问题,我有个建议,setdata外层在加一层判断,searchTop当前值和要设置的值一样就不要进行setdata了。

    2019-02-20
    有用
    回复
  • 2018-07-27

    楼主解决了吗?安卓机一直有延迟问题?

    2018-07-27
    有用
    回复
  • GYL
    GYL
    2018-05-29

    的确有这个问题,onPageScroll中加入节流控制,setData后,会延长好几秒才会更新

    2018-05-29
    有用
    回复
登录 后发表内容