微信小程序实现滑动操作

　　示例简介
　　本文使用动画组件wx。createAnimation来实现滑动操作：
　　1、左滑动显示操作项区域；
　　2、点击操作项触发相应方法；
　　3、右滑动和点击行数据收起操作项；
　　4、点击删除并确定则删除该条数据。
　　最终效果：
　　实现过程
　　1、文件index。wxml和index。wxss代码如下，这一块比较简单，可自行查看分析；
　　Tips：详情、取号和删除点击触发使用catchtap，阻止冒泡事件向上冒泡；viewclasswrapperviewclasscontainerviewclasslistviewclasslinebindtouchstarttouchstartXbindtapresetXbindtouchmovetouchmoveXbindtouchendtouchendXanimation｛｛currentIndexindex？animation：｝｝dataindex｛｛index｝｝wx：for｛｛recordList｝｝wx：keyidimageclassicontitlesrca2020imgdataimg。jpgdatasrc。。。。imagesstarticon。pngimageviewclassmesviewclasstitle｛｛item。title｝｝viewviewclassdate预约时间：｛｛item。date｝｝viewviewclassstatus状态：text｛｛item。status｝｝textviewviewviewclassoperationviewclassdetailcatchtapopenDetail详情viewviewclassnumbercatchtapgetNumber取号viewviewclassdeletecatchtapdeleteItem删除viewviewviewviewviewview。container。line｛display：flex；padding：20rpx30rpx；borderbottom：2rpxsolidebebeb；position：relative；cursor：pointer；｝。container。line。icontitle｛margintop：28rpx；width：30rpx；height：30rpx；｝。container。line。mes｛flex：1；marginleft：10rpx；｝。container。line。mes。date，。container。line。mes。status｛color：9d9d9d；fontsize：24rpx；margintop：4rpx；｝。statustext｛color：fba500；｝。operation｛position：absolute；top：0；right：300rpx；height：152rpx；textalign：center；color：fff；lineheight：152rpx；display：flex；｝。operationview｛width：100rpx；｝。operation。detail｛backgroundcolor：018efb；｝。operation。number｛backgroundcolor：fba500；｝。operation。delete｛backgroundcolor：cfcfcf；｝
　　2、文件index。js存放所有功能的逻辑代码，下面主要分析几个重点方法：
　　1）方法touchmoveX用于手指触摸后移动时获取移动距离，并根据移动距离动画显示操作项相应区域，使移动有即时效果；
　　2）方法touchendX用于手指触摸动作结束时，如果移动距离达到100，则动画显示全部操作项区域；如果移动距离未达到100，则收起操作项区域；
　　3）方法deleteItem用于删除该条数据。letmovedistance0；Page（｛data：｛currentIndex：0，列表操作项的indexrecordList：〔｛列表数据id：1，title：业务办理01，date：2020042110：3012：00，status：未取号｝，｛id：2，title：业务办理02，date：2020042110：3012：00，status：未取号｝，｛id：3，title：业务办理03，date：2020042110：3012：00，status：取号｝〕｝，打开详情页openDetail（）｛console。log（this。data。currentIndex，点击详情）；｝，取号getNumber（）｛console。log（this。data。currentIndex，点击取号）；｝，删除数据deleteItem（）｛letthatthis；letrecordListthis。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｝）；｝elseif（res。cancel）｛console。log（用户点击取消）｝｝｝）；｝，手指触摸动作开始touchstartX（e）｛this。setData（｛currentIndex：e。currentTarget。dataset。index｝）；获取触摸X坐标this。recordXe。touches〔0〕。clientX；｝，点击操作resetX（）｛this。slideAnimation（0，500）；｝，手指触摸后移动touchmoveX（e）｛letcurrentXe。touches〔0〕。clientX；movedistancecurrentXthis。recordX；获取移动距离this。slideAnimation（movedistance，500）；｝，手指触摸动作结束touchendX（）｛letrecordX；if（movedistance100）｛移动达到距离就动画显示全部操作项recordX300；｝elseif（movedistance100）｛移动未达到距离即还原recordX0；｝this。slideAnimation（recordX，500）；｝，滑动动画slideAnimation（recordX，time）｛letanimationwx。createAnimation（｛duration：time，timingFunction：ease｝）；animation。translate（recordXrpx，0）。step（）this。setData（｛animation：animation。export（）｝）｝，onLoad：function（options）｛wx。setNavigationBarTitle（｛title：银行业务，｝）；movedistance0；解决切换到其它页面再返回该页面动画失效的问题｝｝）