首頁  >  文章  >  微信小程式  >  小程式開發之基礎篇滑動操作(10)

小程式開發之基礎篇滑動操作(10)

Y2J
Y2J原創
2017-04-25 09:45:072781瀏覽

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

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

小程式開發之基礎篇滑動操作(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)
  },
})

小程式開發之基礎篇滑動操作(10)

視圖跟隨

#好吧,按鈕醜了點,這不是重點。拖曳操作的實作思路也很簡單,當觸發滑動事件時,event物件會包含目前觸控位置的座標訊息,可以透過
event.touches[0].pageXevent.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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn