收藏
回答

touchmove 写拖动事件卡顿不流畅

页面上有个fixed悬浮按钮,希望可以在页面上任意拖动位置,但是现在的问题是写出来的拖动效果特别不流畅(反应延迟),请问有什么好的办法解决?

<view class='helpbox' style="bottom:{{bottom}}px;right:{{right}}px;" catchtouchmove='setTouchMove'>

<image class='helpimg' src='/images/help.png'></image>

</view>


js代码:

setTouchMove:function(e){

    var that = this;

    var width = 35 * rpx;

    var screenWidth = wx.getSystemInfoSync().windowWidth;

    var screenHeight = wx.getSystemInfoSync().windowHeight;

    var clientX = e.touches[0].clientX;

    var clientY = e.touches[0].clientY;

    //此处clientY与clientX为拖动悬浮窗超过设定的大小会返回默认显示位置

    if (clientX < (screenWidth - width) && clientY < (screenHeight - width) && clientX > width && clientY > width) {

        that.setData({

            right: screenWidth - clientX - width,

            bottom: screenHeight - clientY - width

        })

    } else {

        return;

        // that.setData({

        //   right: 0, //默认显示位置 left距离

        //   bottom: 0  //默认显示位置 top距离

        // })

    }

}


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

2 个回答

  • Yrobot
    Yrobot
    04-18

    其实拖动动画是可以流畅的。确保一下几点:

    1. 尽量使用css3的属性去做动画,少用left、width等,减少回流。

    2. 利用touchmove监听滑动并实时更新视图层时,要catch:touchmove,否则touchmove的监听帧率会很低,导致动画卡顿。(个人觉得这是小程序的bug,无缘无故的监听帧率下降,到现在也没解决)

    04-18
    赞同 1
    回复
  • 微盟
    微盟
    2018-12-11

    由于小程序的逻辑和视图引擎是异步分离的,无法做到流畅。需要修改实现方式,或者不采取需要拖动的解决方案。

    2018-12-11
    赞同
    回复 3
    • Alan
      Alan
      2018-12-11

      谢谢了

      2018-12-11
      回复
    • 璐璐
      璐璐
      01-03回复Alan

      您好,请问您解决了吗这个问题

      01-03
      回复
    • Alan
      Alan
      01-03回复璐璐

       没有,暂时没有做这个功能了

      01-03
      回复