收藏
回答

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距离

        // })

    }

}


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

2 个回答

  • Yrobot
    Yrobot
    2019-04-18

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

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

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

    2019-04-18
    有用 6
    回复 4
    • 爱会多美
      爱会多美
      2019-12-31
      太厉害了,果然一语中的,我现在就因为使用bind:touchmove,导致下滑时卡顿,其他方向没有问题;改成catch后,每个方向都没有问题了
      2019-12-31
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-20
      catchtouchmove是神器
      03-20
      回复
    • 官方提醒
      官方提醒
      04-16回复爱会多美
      请问如何使用catchtouchmove
      04-16
      回复
    • 爱会多美
      爱会多美
      04-16回复官方提醒
      跟bind一样的用法,只是用catch取消了冒泡
      04-16
      回复
  • 微盟
    微盟
    2018-12-11

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

    2018-12-11
    有用
    回复 3
    • Alan
      Alan
      2018-12-11

      谢谢了

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

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

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

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

      2019-01-03
      回复
登录 后发表内容