小程式開發之基礎篇滑動操作（10）

在實際的行動應用程式互動方式中，最常見的就是滑動操作。像左右滑動切換頁面，手指張開來放大圖片等，都是由滑動操作來完成的。

微信小程式預設提供的相關事件如下：

#觸控相關操作事件

##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

//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中文網其他相關文章！