微信小程式手勢滑動卡片案例

效果圖：

首先是卡片布局的實現：

（一）如圖所示，我採用絕對定位absolute的方式，輔助index，可以實現卡片的層疊效果。注意：三張卡片一定都是相同的定位，否則index可能不起作用。

**：

//設定position: absolute; left：50%；後，再 margin-left:負(一半的width)；可以實現水平居中

//同理，設定top：50%；margin-top：負（一半height）;可以實現垂直居中

.body-swiper .body-swiper2 .body-swiper3

上**：

/*

*   *  卡片1手勢
*/touchstart1: 
function
(event) ,
//移動結束處理動畫
touchend1: function
(event)  else
//如果 |x0-x1|
);          
//如更tmy>0，即(離開點的y)-(起始點y)大於0 ，判定為下滑
} else
);        }}} 
else
//讓上一張卡片展現正面（如果之前翻轉過的話）
this
.setdata();
}

（二）最後是動畫的編寫；

上**：

/*

*   * 卡片1:
* 左滑動右滑動動畫
*/animation1: 
function
(translatexx) );
this.animation =animation;
//如果大於0，判定是右滑動畫，否則左滑
if (translatexx > 0)  
else
//設定10ms，視覺欺騙，直接歸位到原來位置
this.animation.translatey(0).translatex(0).opacity(1).rotate(0).step();
this
.setdata();
//動畫結束後重拍三張卡片
settimeout(() =>)
}, 500);
}

微信小程式手勢滑動卡片案例

效果圖 首先是卡片布局的實現 一 如圖所示，我採用絕對定位absolute的方式，輔助index，可以實現卡片的層疊效果。注意 三張卡片一定都是相同的定位，否則index可能不起作用。設定position absolute left 50 後，再 margin left 負 一半的width 可以實...

微信小程式手勢滑動卡片案例

效果圖 一 如圖所示，我採用絕對定位absolute的方式，輔助index，可以實現卡片的層疊效果。注意 三張卡片一定都是相同的定位，否則index可能不起作用。設定position absolute left 50 後，再 margin left 負 一半的width 可以實現水平居中 同理，設定...

微信小程式 滑動手勢處理

3.測試滑動 題外話 其實也就是判斷到底是上下左右哪個方向的滑動啦。話說，我寫這個的時候，到底是滑動，還是划動，這兩個詞糾結了好久 繫結三個事件 touchstart touchend touchcancel，分別對應三個函式 touchstart touchend touchcancel styl...