微信小程序默認提供的相關事件如下：

觸摸相關操作事件

tap對應點擊操作，還提供了longtap來支持長按操作，這些都比較簡單，就不多做講述。
touchmove對應滑動操作，通過bindtouchmove即可響應滑動操作。

//wxml
<view id="id" bindtouchmove="handletouchmove" style = "width : 100px; height : 100px; background : #167567;">
</view>

//js
Page({
  handletouchmove: function(event) {
    console.log(event)
  },
})

當按住view標簽并滑動鼠標時，會不停的觸發滑動事件，直到放開鼠標，當鼠標移出view標簽區域后依然會觸發事件。

拖拽操作

通過監聽滑動事件，可以實現一些實用的功能，比如用過iphone的用戶都知道assistivetouch，一個桌面上的快捷按鈕，可以將按鈕拖動到桌面的任意位置。為了方便，這里就用一個圓形來代表該按鈕。

//wxml
<view id="id" class = "ball" bindtouchmove="handletouchmove" style = "width : 60px; height : 60px; background : #545345;">
</view>

//wxss
.ball {
  box-shadow:2px 2px 10px #AAA;
  border-radius: 20px;
  position: absolute; 
}

//js
Page({
  handletouchmove: function(event) {
    console.log(event)
  },
})

視圖跟隨

好吧，按鈕丑了點，這不是重點。拖拽操作的實現思路也很簡單，當觸發滑動事件時，event對象會包含當前觸摸位置的坐標信息，可以通過event.touches[0].pageX和event.touches[0].pageY 來獲取，為什么touches是數組呢，答案是為了支持多點觸控(在電腦上不知道如何模擬多點觸控)。接下來將按鈕的位置設置為觸摸位置，應該就能實現預期效果了，讓我們試試看。

在Page中定義按鈕的位置數據ballBottom和ballRight，并綁定到view的對應屬性中。

//wxml
<view id="id" class = "ball" bindtouchmove="handletouchmove" style = "width : 60px; height : 60px; background : #545345; top:{{ballTop}}px; left: {{ballLeft}}px">
</view>

//js
Page({
  data: {
    ballTop: 0,
    ballLeft: 0,
  },
  handletouchmove: function(event) {
    console.log(event)
  },
})

接下來在handletouchmove方法中更新按鈕的位置數據

handletouchmove: function(event) {
  console.log(event)
  this.setData ({
    ballTop: event.touches[0].pageY,
    ballLeft: event.touches[0].pageX,
  });
},

運行發現基本可以實現效果，不過有兩個問題，一是會將按鈕拖出屏幕邊緣，二是按鈕始終在鼠標右下方。
接下來加入對屏幕邊界的判斷并對按鈕位置進行修正。其中屏幕大小可以通過wx.getSystemInfo來獲取。
完整代碼如下：

Page({
  data: {
    ballTop: 0,
    ballLeft: 0,
    screenHeight:0,
    screenWidth:0

  },
  onLoad: function () {
      //獲取屏幕寬高
    var _this = this;
    wx.getSystemInfo({
     success: function (res) {
        _this.setData({
          screenHeight: res.windowHeight,
          screenWidth: res.windowWidth,
        });
      }
    });
  },
  handletouchmove: function(event) {
    console.log(event)
    let pageX = event.touches[0].pageX;
    let pageY = event.touches[0].pageY;
    //屏幕邊界判斷
    if (pageX < 30 || pageY < 30)
      return;
    if (pageX > this.data.screenWidth - 30)
      return;
    if (pageY > this.data.screenHeight - 30)
      return;
    this.setData ({
      ballTop: event.touches[0].pageY - 30,
      ballLeft: event.touches[0].pageX - 30,
    });
  },
})

再次運行，一切ok。

手勢識別

通過處理滑動操作可以識別各種手勢操作，如左右滑動等。思路也很簡單，通過綁定touchstart和touchmove事件，然后對坐標信息進行識別計算即可(如current.PageX - last.PageX < 0則認為是向左滑動)

//wxml
<view id="id" class = "ball" bindtap = "handletap" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" style = "width : 100%px; height : 40px;">
{{text}}
</view>

//js
Page({
  data: {
    lastX: 0,
    lastY: 0,
    text : "沒有滑動",
  },
  handletouchmove: function(event) {
    console.log(event)
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY

    console.log(currentX)
    console.log(this.data.lastX)
    let text = ""
    if ((currentX - this.data.lastX) < 0)
      text = "向左滑動"
    else if (((currentX - this.data.lastX) > 0))
      text = "向右滑動"

    //將當前坐標進行保存以進行下一次計算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

  handletouchtart:function(event) { 
    console.log(event)
    this.data.lastX = event.touches[0].pageX
    this.data.lastY = event.touches[0].pageY
  },
  handletap:function(event) {
    console.log(event)
  },
})

運行程序，當向左滑動時會view會顯示"向左滑動", 向右同理。

同時識別左右滑動和上下互動
有時候希望同時識別左右和上下滑動，可以通過比較X軸上的差值和Y軸上的差值，較大的差值為滑動方向。

 handletouchmove: function(event) {
    console.log(event)
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY
    let tx = currentX - this.data.lastX
    let ty = currentY - this.data.lastY
    let text = ""
    //左右方向滑動
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0)
        text = "向左滑動"
      else if (tx > 0)
        text = "向右滑動"
    }
    //上下方向滑動
    else {
      if (ty < 0)
        text = "向上滑動"
      else if (ty > 0)
        text = "向下滑動"
    }

    //將當前坐標進行保存以進行下一次計算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

在實際應用中，當某種手勢被觸發后，在用戶沒有放開鼠標或手指前，會一直識別為該手勢。比如當用戶觸發左滑手勢后，這時再向下滑動，仍要按照左滑手勢來處理。
可以定義一個標記來記錄第一次識別到的手勢，如果已識別出手勢，后續的滑動操作就可以忽略，直到用戶放開鼠標或手指。放開鼠標或手指操作可以通過綁定handletouchend事件來處理。

Page({
  data: {
    lastX: 0,
    lastY: 0,
    text : "沒有滑動",
    currentGesture: 0,
  },
  handletouchmove: function(event) {
    console.log(event)
    if (this.data.currentGesture != 0){
      return
    }
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY
    let tx = currentX - this.data.lastX
    let ty = currentY - this.data.lastY
    let text = ""
    //左右方向滑動
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {
        text = "向左滑動"
        this.data.currentGesture = 1
      }
      else if (tx > 0) {
        text = "向右滑動"
        this.data.currentGesture = 2
      }

    }
    //上下方向滑動
    else {
      if (ty < 0){
        text = "向上滑動"
        this.data.currentGesture = 3

      }
      else if (ty > 0) {
        text = "向下滑動"
        this.data.currentGesture = 4
      }

    }

    //將當前坐標進行保存以進行下一次計算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text : text,
    });
  },

  handletouchtart:function(event) { 
    console.log(event)
    this.data.lastX = event.touches[0].pageX
    this.data.lastY = event.touches[0].pageY
  },
  handletouchend:function(event) {
    console.log(event)
    this.data.currentGesture = 0
    this.setData({
      text : "沒有滑動",
    });
  },
})

多點觸控
由于多點觸控需要真機來測試，而我的appid還在申請中，只能延后講解了。這里大概提下思路，比如手指張開的操作，可以分別判斷兩個觸摸點的移動方向，比如靠左的觸摸點向左滑動，靠右的觸摸點向右滑動，即可判定為手指張開操作。

以上就是小程序開發之基礎篇滑動操作（10）的詳細內容，更多請關注php中文網其它相關文章！