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

2021-09-24 07:37:30 字數 1215 閱讀 9347

效果圖:

(一)

如圖所示,我採用絕對定位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|<|y0-y1|,即absx} else );

// 如更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: github.com/rancelotusl…

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

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