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