瘋狂早茶小程序基礎(chǔ)篇七滑動操作

1、在實際的移動應(yīng)用程序交互方式中，最常見的就是滑動操作。像左右滑動切換頁面，手指張開來放大等，都是由滑動操作來完成的。小程序默認(rèn)提供的相關(guān)事件如下：tap 對應(yīng)點擊操作，還提供了 longtap 來支持長按操作，這些都比較簡單，就不多做講述。touove 對應(yīng)滑動操作，通過 bindtouove 即可響應(yīng)滑動操作。瘋狂早茶小程序基礎(chǔ)篇七：滑動操作/wxml/jsPage(handletouove: function(event) console.log(event),)當(dāng)按住 view，當(dāng)鼠標(biāo)移出 view區(qū)域后依然會觸發(fā)事件。拖拽操作通過滑動事件，可以實現(xiàn)一些實用的功能，比如用過的用戶都知道

2、assistivetouch，一個桌面上的快捷按鈕，可以將按鈕拖動到桌面的任意位置。為了方便，這里就用一個圓形來代表該按鈕。/wxml/wxss.ball box-shadow:2px 2px 10px #AAA;border-radius: 20px;ition: absolute;/jsPage(handletouove: function(event) console.log(event),)好吧，按鈕丑了點，這不是重點。拖拽操作的實現(xiàn)思路也很簡單，當(dāng)觸發(fā)滑動事件時，event 對象會包含當(dāng)前觸摸位置的坐標(biāo)信息，可以通過 event.touches0.pageX 和 event.touc

3、hes0.pageY 來獲取，為什么 touches 是數(shù)組呢，是為了支持多點觸控(在電腦上不知道如何模擬多點觸控)。接下來將按鈕的位置設(shè)置為觸摸位置，應(yīng)該就能實現(xiàn)預(yù)期效果了，讓試試看。在 Page 中定義按鈕的位置數(shù)據(jù) ballBottom 和 b，并綁定到 view 的對應(yīng)屬性中。/wxml/jsPage(data: ballTop: 0,ballLeft: 0,handletouove: function(event) console.log(event),)接下來在 handletou方法中更新按鈕的位置數(shù)據(jù)handletouove: function(event) console.l

4、og(event)this.setData (ballTop: event.touches0.pageY,ballLeft: event.touches0.pageX,);,運行發(fā)現(xiàn)基本可以實現(xiàn)效果，不過有兩個問題，一是會將按鈕拖出屏幕邊緣，二是按鈕始終在鼠標(biāo)右下方。接下來加入對屏幕邊界的判斷并對按鈕位置進行修正。其中屏幕大小可以通過 wx.getSystemInfo 來獲取。完整代碼如下：Page(data: ballTop: 0,ballLeft: 0,screenHeight:0,screenWidth:0,onLoad: function () /獲取屏幕寬高var _this = t

5、his;wx.getSystemInfo(sucs: function (res) _this.setData(screenHeight: res.windowHeight,screenWidth: res.windowWidth,););,handletouove: function(event) console.log(event)let pageX = event.touches0.pageX;let pageY = event.touches0.pageY;/屏幕邊界判斷if (pageX 30 | pageY this.data.screenWidth - 30)return;if

6、(pageY this.data.screenHeight - 30)return;this.setData (ballTop: event.touches0.pageY - 30,ballLeft: event.touches0.pageX - 30,);,)再次運行，一切 ok。手勢識別通過處理滑動操作可以識別各種手勢操作，如左右滑動等。思路也很簡單，通過綁定 touchstart 和 touove 事件，然后對坐標(biāo)信息進行識別計算即可(如 current.PageX - last.PageX 0 則認(rèn)為是向左滑動)/wxmltext/jsPage(data: lastX: 0,lastY

7、: 0,text : 沒有滑動,handletouove: function(event) console.log(event)let currentX = event.touches0.pageXlet currentY = event.touches0.pageYconsole.log(currentX)console.log(this.data.lastX)let text = if (currentX - this.data.lastX) 0)text = 向右滑動/將當(dāng)前坐標(biāo)進行保存以進行下一次計算this.data.lastX = currentXthis.data.lastY =

8、 currentYthis.setData(text : text,);,handletouchtart:function(event) console.log(event)this.data.lastX = event.touches0.pageXthis.data.lastY = event.touches0.pageY,handletap:function(event) console.log(event),)運行程序，當(dāng)向左滑動時會 view 會顯示向左滑動,向右同理。同時識別左右滑動和上下互動有時候希望同時識別左右和上下滑動，可以通過比較 X 軸上的差值和 Y 軸上的差值，較大的差值

9、為滑動方向。handletouove: function(event) console.log(event)let currentX = event.touches0.pageXlet currentY = event.touches0.pageYlet tx = currentX - this.data.lastXlet ty = currentY - this.data.lastYlet text = /左右方向滑動if (Mabs(tx) Maif (tx 0)text = 向右滑動/上下方向滑動else if (ty 0)text = 向下滑動/將當(dāng)前坐標(biāo)進行保存以進行下一次計算thi

10、s.data.lastX = currentXthis.data.lastY = currentYthis.setData(text : text,);,在實際應(yīng)用中，當(dāng)某種手勢被觸發(fā)后，在用戶沒有放開鼠標(biāo)或手指前，會一直識別為該手勢。比如當(dāng)用戶觸發(fā)左滑手勢后，這時再向下滑動，仍要按照左滑手勢來處理?？梢远x一個標(biāo)記來第一次識別到勢，如果已識別出手勢，后續(xù)的滑動操作就可以忽略或手指操作可以通過綁定 handletouchend 事件來處理。Page(data: lastX: 0,lastY: 0,text : 沒有滑動,currentGesture: 0,handletouove: funct

11、ion(event) console.log(event)if (this.durrentGesture != 0)returnlet currentX = event.touches0.pageXlet currentY = event.touches0.pageYlet tx = currentX - this.data.lastXlet ty = currentY - this.data.lastYlet text = /左右方向滑動if (Mabs(tx) Mabs(ty) if (tx 0) text = 向右滑動this.durrentGesture = 2/上下方向滑動else if (ty 0) text = 向下滑動this.durrentGesture = 4/將當(dāng)前坐標(biāo)進行保存以進行下一次計算this.data.lastX = currentXthis.data.lastY = currentYthis.setData(text : text,);,handletouchtart:function(event) console.log(event)this.data.lastX = event.touches0.pageXthis.data.lastY = event.touches0.pageY,handletouchend:funct