小程序界面篇——滑動事件解析

小程序滑動事件

現實生活中，大家是否有過購物車商品左滑刪除的經歷？或者左滑切換頁面的經歷？那麼今天我們來看一看小程序中滑動事件到底是怎麼一回事

事件介紹

▲▲▲

先看一下三個綁定事件：

1.bindtouchstart

2.bindtouchmove

3.bindtouchend

其實這三個觸發事件的回調是相同的，只不過bindtouchstart是在你觸摸到屏幕的時候會觸發一次，bindtouchmove是在手指滑動的時候觸發(一直滑動就會一直觸發)，bindtouchend就是手指離開屏幕的時候觸發。

那麼他們觸發後回調：

我們主要是看touches這個數組，當我們一隻手指點上去的時候他的長度是1，但是兩隻手指點進去長度就是2。效果圖如下

所以我們通常會根據他的長度來判斷是幾隻手指觸碰。

在touches數組中會存放對象，存儲一些信息：

其中clientX是X軸的坐標，clientY是Y軸的坐標，也就是窗口可視區域的X，Y坐標（窗口坐標），會隨之滾動條的移動而移動。而pageX,pageY的值不會隨著滾動條的移動而移動。force: 表示壓力大小，是從0.0(沒有壓力)到1.0(最大壓力)的浮點數。identifier: 是一次觸摸動作的唯一標識符。

這就是bindtouchstart事件，其他兩個跟他類似就不再介紹了

事件的應用

▲▲▲

下面我將用一個實際的例子，來看一下如何運用他們。

這個例子：實現效果是這樣的，左右滑動會切換不同的題，也就是滑動換題。

通過左右滑動，我們能夠切換題目，看代碼：

touchE:function(e) {

varthat =this

if(e.changedTouches.length ==1) {

//手指移動結束後觸摸點位置的X坐標

varendX = e.changedTouches[].clientX;

varendY = e.changedTouches[].clientY;

//計算手指起始點的X坐標與當前結束點的X坐標的差值

vardisX = that.data.startX - endX;

vardisY = that.data.startY - endY;

//delBtnWidth 為右側按鈕區域的寬度

vardelBtnWidth = that.data.delBtnWidth;

vartxtStyle ="";

// console.log(disY)

if(disY -80) {

// console.log(disX)

if(disX

// console.log("上一題")

if(that.data.current >) {

that.setHomeWork(that.data.list[that.data.current -1].name, that.data.current -1)

that.clearAnswer()

}else{

that.info("提示","親,前面已經無題可刷了哦!")

return

}

}elseif(disX >110) {//移動距離大於0，文本層left值等於手指移動距離

// console.log("下一題")

if(that.data.current

that.setHomeWork(that.data.list[that.data.current +1].name, that.data.current +1)

that.clearAnswer()

}else{

that.info("提示","真厲害!這已經是最後一題啦,請親耐心等待後續的更新哦")

return

}

}

}

}

},

在第一部分中介紹的bindtouchstart這個事件中保存了，手指觸碰的位置，在bindtouchend事件中(上述代碼)：我們通過兩個事件得到Y軸的對比，分析出手指是上下滑動還是左右滑動，如果是上下滑動，就不觸發切換的方法，如果是左右滑動那我們就開始進行題目的切換工作。關於題目的切換工作，前面的文章的已經講解過了，大家可以到公眾號的小程序板塊中去看，這裡就不再說了。

注意：

為什麼不再移動的事件中處理的問題：因為移動的方法是一個連續的過程，如果寫在這裡面，可能會一下子切換到最後一題。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！