561
魔獸
微信小程序開發教程 基礎篇 10-滑動操作
在實際的移動應用程序交互方式中，最常見的就是滑動操作。像左右滑動切換頁麵，手指張開來放大圖片等，都是由滑動操作來完成的。
微信小程序默認提供的相關事件如下：
bindtouchmove
即可響應滑動操作。
當按住
view
標簽並滑動鼠標時，會不停的觸發滑動事件，直到放開鼠標，當鼠標移出
view
標簽區域後依然會觸發事件。
拖拽操作
通過監聽滑動事件，可以實現一些實用的功能，比如用過iphone的用戶都知道assistivetouch，一個桌麵上的快捷按鈕，可以將按鈕拖動到桌麵的任意位置。為了方便，這裏就用一個圓形來代表該按鈕。
好吧，按鈕醜了點，這不是重點。拖拽操作的實現思路也很簡單，當觸發滑動事件時，event對象會包含當前觸摸位置的坐標信息，可以通過
event.touches[0].pageX
和
event.touches[0].pageY
來獲取，為什麼touches是數組呢，答案是為了支持多點觸控(在電腦上不知道如何模擬多點觸控)。接下來將按鈕的位置設置為觸摸位置，應該就能實現預期效果了，讓我們試試看。
在Page中定義按鈕的位置數據ballBottom和ballRight，並綁定到view的對應屬性中。
接下來在
handletouchmove
方法中更新按鈕的位置數據
handletouchmove: function(event) { console.log(event) this.setData ({ ballTop: event.touches[0].pageY, ballLeft: event.touches[0].pageX, }); },
運行發現基本可以實現效果，不過有兩個問題，一是會將按鈕拖出屏幕邊緣，二是按鈕始終在鼠標右下方。 接下來加入對屏幕邊界的判斷並對按鈕位置進行修正。其中屏幕大小可以通過
來獲取。 完整代碼如下：
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 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
運行程序，當向左滑動時會
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 (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 = 2 } } //上下方向滑動 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還在申請中，隻能延後講解了。這裏大概提下思路，比如手指張開的操作，可以分別判斷兩個觸摸點的移動方向，比如靠左的觸摸點向左滑動，靠右的觸摸點向右滑動，即可判定為手指張開操作。
最後更新：2017-10-08 07:50:31