3. 測試滑動
題外話：繫結三個事件：其實也就是判斷到底是上下左右哪個方向的滑動啦。
話說，我寫這個的時候，到底是滑動，還是划動，這兩個詞糾結了好久~
touchstart、touchend、touchcancel，分別對應三個函式：touchstart、touchend、touchcancel
style
="width
:100%;
height
:100%;"
bind:touchstart
="touchstart"
bind:touchend
="touchend"
bind:touchcancel
="touchcancel"
>
view
>
var minoffset =30;
//最小偏移量，低於這個值不響應滑動處理
var mintime =60;
// 最小時間，單位：毫秒，低於這個值不響應滑動處理
var startx =0;
//開始時的x座標
var starty =0;
//開始時的y座標
var starttime =0;
//開始時的毫秒數
2.2 觸控開始事件，初始化startx、starty和starttime；
這裡主要是在手指剛觸控的螢幕的時候，獲取最初的x、y座標。我們把這個當做初始座標。
/**
* 觸控開始事件，初始化startx、starty和starttime
*/touchstart:
function
(e),
當觸控事件被取消中斷的時候，要重置startx、starty、starttime三個的數值。
/**
* 觸控取消事件 （手指觸控動作被打斷，如來電提醒，彈窗），要將startx、starty和starttime重置
*/touchcancel:
function
(e),
注：這裡注釋較多，為了便於理解，強迫症可以刪掉。簡單畫了個分析手勢型別的**，便於理解。
圖示名稱
條件1（偏移量x或者y要大於最小偏移量）
條件2（可以判斷出是左右滑動還是上下滑動）
條件3（判斷偏移量的正負）←左劃
math.abs(偏移量 )>= minoffset
math.abs(x偏移量) > math.abs(y偏移量)
x偏移量 < 0→右劃
同上同左劃
x偏移量 > 0↑上劃
同上math.abs(x偏移量) < math.abs(y偏移量)
y偏移量 < 0↓下劃
同上同上劃
y偏移量 > 0
js**如下：
/**
* 觸控結束事件，主要的判斷在這裡
*/touchend:
function
(e)else
}else
if(math.
abs(xoffset)
< math.
abs(yoffset)
&& math.
abs(yoffset)
>= minoffset)
else}}
else
},
嘗試滑動，檢視控制台。
微信小程式手勢滑動卡片案例
效果圖 首先是卡片布局的實現 一 如圖所示，我採用絕對定位absolute的方式，輔助index，可以實現卡片的層疊效果。注意 三張卡片一定都是相同的定位，否則index可能不起作用。設定position absolute left 50 後，再 margin left 負 一半的width 可以實...
微信小程式手勢滑動卡片案例
效果圖 一 如圖所示，我採用絕對定位absolute的方式，輔助index，可以實現卡片的層疊效果。注意 三張卡片一定都是相同的定位，否則index可能不起作用。設定position absolute left 50 後，再 margin left 負 一半的width 可以實現水平居中 同理，設定...
微信小程式手勢滑動卡片案例
效果圖 首先是卡片布局的實現 一 如圖所示，我採用絕對定位absolute的方式，輔助index，可以實現卡片的層疊效果。注意 三張卡片一定都是相同的定位，否則index可能不起作用。設定position absolute left 50 後，再 margin left 負 一半的width 可以實...