收藏
回答

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的监听帧率会很低,导致动画卡顿。


    打个广告,小程序需要监听复杂手势的话(双击,长按,旋转,等等),可以使用mian-touch, github地址为 https://github.com/Yrobot/mina-touch

    2019-04-18
    有用 10
    回复 7
    • 爱会多美
      爱会多美
      2019-12-31
      太厉害了,果然一语中的,我现在就因为使用bind:touchmove,导致下滑时卡顿,其他方向没有问题;改成catch后,每个方向都没有问题了
      2019-12-31
      回复
    • Admin²⁰²²
      Admin²⁰²²
      2020-03-20
      catchtouchmove是神器
      2020-03-20
      回复
    • 宁
      2020-04-16回复爱会多美
      请问如何使用catchtouchmove
      2020-04-16
      回复
    • 爱会多美
      爱会多美
      2020-04-16回复
      跟bind一样的用法,只是用catch取消了冒泡
      2020-04-16
      回复
    • 星星的亮光
      星星的亮光
      01-06
      大佬牛皮,救了我一命,哈哈
      01-06
      回复
    查看更多(2)
  • 微盟
    微盟
    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
      回复
登录 后发表内容