效果圖:
首先是卡片布局的實現:
(一)如圖所示,我採用絕對定位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();
}
(二)最後是動畫的編寫;
上**:
**已上傳到github:/**
* 卡片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...