滑动事件判断(手指上划、下滑/左滑、右滑)

• 需求描述：手指向上滑动pushpage向上变长

• 图片

  
  
  滑动前
  
  
  向上滑动后

• 代码如下

/*wxss*/
/* 可拉动页面 */
.pushpage{
  width: 750rpx;
  height: 700rpx;
  /* background-color:rgba(0, 0, 0, 0.7) ; */
  background: #fff;
  position: absolute;
  bottom: 0;
  transition: all 0.2s linear;
  border-radius: 20rpx 20rpx 0 0;
  box-shadow:-4rpx 22rpx 65rpx 25rpx rgb(180, 172, 172,0.5);
}
.push100{
  height: 1350rpx;
}
.title{
  padding: 20rpx;
  font-size: 28rpx;
}

//wxml
<view class="pushpage {{pageall?'push100':''}}"
bindtouchstart='touchStart' 
bindtouchmove='touchMove' 
bindtouchend='touchEnd'

>

//js
data:{
    touchS : [0,0],
    touchE : [0,0],
}
touchStart: function(e){
    // console.log(e.touches[0].pageX)
    let sx = e.touches[0].pageX
    let sy = e.touches[0].pageY
    this.data.touchS = [sx,sy]
  },
  touchMove: function(e){
    let sx = e.touches[0].pageX;
    let sy = e.touches[0].pageY;
    this.data.touchE = [sx, sy]
  },
  touchEnd: function(e){
    let start = this.data.touchS
    let end = this.data.touchE
    // console.log(start)
    // console.log(end)
    if(start[1] < end[1] - 50){
      // console.log('下滑')
      this.setData({pageall:false})
    }else if(start[1] > end[1] + 50){
      // console.log('上滑')
      this.setData({pageall:true})
    }else{
      // console.log('静止')
    }
  },