目录
前言
实现过程
本文使用动画组件wx.createAnimation来实现滑动操作:
1. 左滑动显示操作项区域;
2. 点击操作项触发相应方法;
3. 右滑动和点击行收起操作项;
4. 点击“删除”并确定则删除该条数据。
最终效果如下:
1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析;
Tips:“详情”、“取号”和“删除”点击触发使用catchtap,阻止冒泡事件向上冒泡;
{{item.title}}
预约时间:{{item.date}}
状态:{{item.status}}
详情
取号
删除
.container .line {
display: flex;
padding: 20rpx 30rpx;
border-bottom: 2rpx solid #ebebeb;
position: relative;
cursor: pointer;
}
.container .line .icon-title {
margin-top: 28rpx;
width: 30rpx;
height: 30rpx;
}
.container .line .mes {
flex: 1;
margin-left: 10rpx;
}
.container .line .mes .date, .container .line .mes .status {
color: #9d9d9d;
font-size: 24rpx;
margin-top: 4rpx;
}
.status text {
color: #fba500;
}
.operation {
position: absolute;
top: 0;
right: -300rpx;
height: 152rpx;
text-align: center;
color: #fff;
line-height: 152rpx;
display: flex;
}
.operation view {
width: 100rpx;
}
.operation .detail {
background-color: #018efb;
}
.operation .number {
background-color: #fba500;
}
.operation .delete {
background-color: #cfcfcf;
}
2. 文件index.js存放所有功能的逻辑代码,下面主要分析几个重点方法:
1)方法touchmoveX用于手指触摸后移动时获取移动距离,并根据移动距离动画显示操作项相应区域,使移动有即时效果;
2)方法touchendX用于手指触摸动作结束时,如果移动距离达到100,则动画显示全部操作项区域;如果移动距离未达到100,则收起操作项区域;
3)方法deleteItem用于删除该条数据。
let movedistance = 0;
Page({
data: {
currentIndex: 0, // 列表操作项的index
recordList: [{ // 列表数据
id: 1,
title: '业务办理01',
date: '2020-04-21 10:30-12:00',
status: '未取号'
}, {
id: 2,
title: '业务办理02',
date: '2020-04-21 10:30-12:00',
status: '未取号'
}, {
id: 3,
title: '业务办理03',
date: '2020-04-21 10:30-12:00',
status: '取号'
}]
},
// 打开详情页
openDetail() {
console.log(this.data.currentIndex, '点击详情');
},
// 取号
getNumber() {
console.log(this.data.currentIndex, '点击取号');
},
// 删除数据
deleteItem() {
let that = this;
let recordList = this.data.recordList;
wx.showModal({
title: '提示',
content: '是否删除该条数据?',
success(res) {
if (res.confirm) {
that.slideAnimation(0, 500);
recordList.splice(that.data.currentIndex, 1);
that.setData({
recordList: recordList
});
} else if (res.cancel) {
console.log('用户点击取消')
}
}
});
},
// 手指触摸动作开始
touchstartX(e) {
this.setData({
currentIndex: e.currentTarget.dataset.index
});
// 获取触摸X坐标
this.recordX = e.touches[0].clientX;
},
// 点击操作
resetX() {
this.slideAnimation(0, 500);
},
// 手指触摸后移动
touchmoveX(e) {
let currentX = e.touches[0].clientX;
movedistance = currentX - this.recordX; // 获取移动距离
this.slideAnimation(movedistance, 500);
},
// 手指触摸动作结束
touchendX() {
let recordX;
if (movedistance <= -100) { // 移动达到距离就动画显示全部操作项
recordX = -300;
} else if (movedistance >= -100) { // 移动未达到距离即还原
recordX = 0;
}
this.slideAnimation(recordX, 500);
},
// 滑动动画
slideAnimation(recordX, time) {
let animation = wx.createAnimation({
duration: time,
timingFunction: 'ease'
});
animation.translate(recordX + 'rpx', 0).step()
this.setData({
animation: animation.export()
})
},
onLoad: function(options) {
wx.setNavigationBarTitle({
title: '银行业务',
});
movedistance = 0; // 解决切换到其它页面再返回该页面动画失效的问题
}
})
扫描公众号,了解更多实例分享: