微信小程序拖动手势的实现

首先来看下效果图:


微信小程序拖动手势的实现_第1张图片

代码实现如下:


    

var startPoint;
Page({
  data:{
    animationData:{},
    buttonTop:0,
    buttonLeft:0
  },
onShow:function(){
  this.animation = wx.createAnimation({
        duration: 0,
        timingFunction: 'ease',
    })
},
// button拖动的三个方法
  buttonStart: function(e){
    startPoint = e.touches[0]
  },
   buttonMove: function(e){
    var endPoint = e.touches[e.touches.length-1]
    this.animation.translate(endPoint.clientX - startPoint.clientX, endPoint.clientY - startPoint.clientY).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
   buttonEnd: function(e){
     console.log(e);
     var endPoint = e.changedTouches[0]
    this.setData({
      buttonTop:(endPoint.clientY-20),
      buttonLeft:(endPoint.clientX-50)
    })
  }
})``` 
注:还有一点瑕疵,在拖动结束时,会有稍微波动,哪位大神懂了还望跟我说一下啊

你可能感兴趣的:(微信小程序拖动手势的实现)