小程序双手指手势

给大家看个demo

上拉手势和放缩手势。

要点：上拉手势与侧滑手势不冲突，如何实现双手指的放缩手势。

async changeItem(e){
        switch(e.type){
          case 'touchstart':{
            this.touch.startY = e.changedTouches[0].clientY;
            this.touch.startX = e.changedTouches[0].clientX;
            this.isDouble = false
            if(e.touches.length==2){
              //确定为双手指手势 
              this.isDouble = true
              let x = Math.pow(e.touches[0].clientX - e.touches[1].clientX,2)
              let y = Math.pow(e.touches[0].clientY - e.touches[1].clientY,2)
              this.touch.distanceStart = Math.sqrt(x+y)
              console.log('ss',this.touch.distance)
            }
            break
          }
          case 'touchmove':{
            if(e.touches.length==1||this.touch.distanceEnd){
            //如果为单手指手势或已经确定this.touch.distanceEnd，则不再执行以下函数。
              return
            }
            let x = Math.pow(e.touches[0].clientX - e.touches[1].clientX,2)
            let y = Math.pow(e.touches[0].clientY - e.touches[1].clientY,2)
            console.log('Math.sqrt(x+y)',Math.sqrt(x+y))
            let distance = Math.sqrt(x+y) - this.touch.distanceStart 
            if(Math.abs(distance)>20){
              this.touch.distanceEnd = distance
            }
            break
          }
          case 'touchend':{
            this.touch.endY = e.changedTouches[0].clientY;
            this.touch.endX = e.changedTouches[0].clientX;
            let y=this.touch.endY-this.touch.startY
            let x=this.touch.endX-this.touch.startX
            //双手指处理方法
            if(this.isDouble){
              console.log('this.touch.distanceEnd',this.touch.distanceEnd)
              if(this.touch.distanceEnd>20){
                if(!this.showListCard)return
                this.hideWithAnimate()
              }else if(this.touch.distanceEnd<-20){
                if(this.showListCard)return
                this.showListCard=true;
                this.$apply()
                this.showWithAnimate()
              }
               this.touch.distanceEnd = 0 
              return
            }
            //上拉手势处理方法
            if(y<-100&&Math.abs(x)<100){
              this.showHistory = true
              this.$apply()
              wx.hideTabBar()
            }else if(y>30){
              if(this.showHistory){
                wx.showTabBar()
                this.showHistory = false
              }
            }
            break
          }
        }
      }

代码要点总结：1.changeItem这个函数是对应三个touch事件的；2.在touchstart中判断是否为双手指事件3.在touchMove事件中确定放缩方向，距离是增是减。由于偷懒直接把distanceEnd赋值为变化的距离；3.为了避免上拉与侧滑冲突，限定x轴方向变化的距离不超过100.