在實際的行動應用程式互動方式中,最常見的就是滑動操作。像左右滑動切換頁面,手指張開來放大圖片等,都是由滑動操作來完成的。
微信小程式預設提供的相關事件如下:
##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標籤區域後方依然會觸發事件
。
//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是數組呢,答案是為了支援多點觸控(在電腦上不知道如何模擬多點觸控)。接下來將按鈕的位置設定為觸控位置,應該就能實現預期效果了,讓我們試試看。
//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中文網其他相關文章!