简介
1.利用touch事件判断左滑右滑
2.左滑(下一张)时,删除卡片集合第一项(当前页),并将删除的内容放到卡片集合末尾,添加相应动画过度
3.右滑(上一张)时,删除卡片集合末尾项(最后一页),并将删除的内容放到卡片集合第一项,添加相应动画过度
4.判断是否滑到最后一张(第一张),给出提示
效果图
1.gif
wxml
{{item.name}}
js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
nowPgae:1,
startX:0,
slider:false,
animationData:{},
cardInfoList: [{ name: 1}, { name: 2}, { name: 3}, { name: 4}]
},
touchstart(e){
this.setData({
startX: e.changedTouches[0].clientX,
})
},
touchend(e) {
let that=this;
let startX = this.data.startX;
let endX = e.changedTouches[0].clientX;
if (this.data.slider)return;
// 下一页(左滑距离大于30)
if (startX - endX > 30){
this.setData({
slider: true
});
//尾页(当前页 等于 总页数)
if (this.data.nowPgae == this.data.cardInfoList.length){
this.setData({
slider: false
});
wx.showToast({title: '已经是最后一张了',icon:'none'});
return;
};
//创建动画 5s将位置移动到-150%,-150%
let animation = wx.createAnimation({
duration: 500,
});
animation.translateX('-150%').translateY('-150%').rotate(60).step();
this.setData({
animationData: animation.export()
});
// 移动完成后
setTimeout(function(){
var cardInfoList = that.data.cardInfoList;
var slidethis = that.data.cardInfoList.shift(); //删除数组第一项
that.data.cardInfoList.push(slidethis); //将第一项放到末尾
//创建动画 将位置归位
let animation = wx.createAnimation({
duration: 0,
});
animation.translateX('-53%').translateY('-50%').rotate(0).step();
that.setData({
cardInfoList: that.data.cardInfoList,
animationData: animation.export(),
slider:false,
nowPgae:that.data.nowPgae+1
});
},500)
}
// 上一页
if (endX-startX > 30){
this.setData({
slider: true
})
//首页
if (this.data.nowPgae == 1) {
this.setData({
slider: false
})
wx.showToast({title: '已经到第一张了',icon: 'none'})
return;
};
//创建动画 移动到-150%,-150%
let animation = wx.createAnimation({
duration: 0,
});
animation.translateX('-150%').translateY('-150%').rotate(100).step();
var cardInfoList = that.data.cardInfoList;
var slidethis = that.data.cardInfoList.pop(); //删除数组末尾项
that.data.cardInfoList.unshift(slidethis);//将删除的末尾项放到第一项
that.setData({
animationData: animation.export(),
cardInfoList: that.data.cardInfoList,
});
setTimeout(function(){
//创建动画 5s将位置移动到原位
let animation2 = wx.createAnimation({
duration: 500,
// timingFunction: 'cubic-bezier(.8,.1,.2,0.8)',
});
animation2.translateX('-53%').translateY('-50%').rotate(0).step();
that.setData({
animationData: animation2.export()
});
that.setData({
slider: false,
nowPgae: that.data.nowPgae - 1
});
},50)
}
},
onLoad: function() {},
})
wxss
page {
height: 100%;
}
.container {
height: 100%;
}
.card_wrap {
position: relative;
width: 100%;
height: 100%;
background: #f2f2f6;
}
.card_wrap .card_item {
position: absolute;
width: 80%;
height: 85%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 30rpx;
background: #fff;
border: 2rpx solid #eee;
border-radius: 20rpx;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 5, 1);
}
.card_item:nth-child(1) {
z-index: 4;
transform: translateX(-53%) translateY(-50%);
}
.card_item:nth-child(2) {
z-index: 3;
transform: translateX(-53%) translateY(-50%);
}
.card_item:nth-child(3) {
z-index: 2;
transform: translateX(-50%) translateY(-51%);
}
.card_item:nth-child(4) {
z-index: 1;
transform: translateX(-47%) translateY(-52%);
}
.card-container {
width: 100%;
height: 100%;
}
