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

效果圖：

首先是卡片布局的實現：

（一）如圖所示，我採用絕對定位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|
} 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...