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

2022-08-01 07:06:12 字數 1440 閱讀 4090

效果圖:

首先是卡片布局的實現:

(一)如圖所示,我採用絕對定位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);

}

**已上傳到github:

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

效果圖 首先是卡片布局的實現 一 如圖所示,我採用絕對定位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...