加载中 ...
首页 > 新闻资讯 > 小程序 正文

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

2019-07-31 10:01:51 来源:沈阳小程序开发 作者:沈阳软件开发

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

21708-1P3291I11Aa.jpg

小程序滑动删除效果示例

21708-1P3291I031523.png

每个列表项绑定到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> startX)//右滑动

v.isTouchMove=false

否则//左侧幻灯片

v.isTouchMove=true

}

})

////更新数据

this.setData({

列表: this.data.list

})

},

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

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

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

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

“沈阳软件公司”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

我们联系删除或处理,客服QQ:55506560,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

其观点或证实其内容的真实性。