小程序幻灯片删除功能和实现

小程序幻灯片删除功能在应用程序中很常见，一般向左滑动列表删除项目，那么如何实现这种形式呢？

小程序滑动删除效果示例

每个列表项绑定到touchstart和touchmove事件，监视滑动手势，确定滑动角度，并确定滑动是否有效。数据源的每个项目都包含一个标志值isTouchMove，用于确定是否刷过该项目。成功列表项有两个类，根据isTouchMove的值来确定渲染类删除时数据源的直接操作

Touchmove:功能（e）{

设index=e.currentTarget.dataset.index，//当前索引

startX=this.data.startX，//开始X坐标

startY=this.data.startY，//开始Y坐标

touchMoveX=e.changedTouches [0] .clientX，//滑动变化坐标

touchMoveY=e.changedTouches [0] .clientY，//滑动变化坐标

//获取滑动角度

Angle=this.angle（{X: startX，Y: startY}，{X: touchMoveX，Y: touchMoveY}）;

this.data.list.forEach（function（v，i）{

v.isTouchMove=false

//滑动30度以返回

如果（Math.abs（angle）> 30）返回;

如果（i==index）{

如果（touchMoveX＆gt; startX）//右滑动

v.isTouchMove=false

否则//左侧幻灯片

v.isTouchMove=true

}

}）

////更新数据

this.setData（{

列表: this.data.list

}）

}，

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。

更多小程序开发案例，全部位于：http://www.hvihi.com/xiaocx/kaifa.html

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。