小程序滑动删除功能及实现方式

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


小程序滑动删除效果示例

  每个列表项绑定touchstart和touchmove事件,监听滑动手势,确定滑动角度,判断滑动是否有效 列表数据源每一项包含标志值isTouchMove,用来确定此项是否滑动成功 列表项有两个类,根据isTouchMove的值来确定渲染那个类 删除时直接操作数据源

  touchmove: function (e) {

  let 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度角 return

  if (Math.abs(angle) > 30) return;

  if (i == index) {

  if (touchMoveX > startX) //右滑

  v.isTouchMove = false

  else //左滑

  v.isTouchMove = true

  }

  })

  // //更新数据

  this.setData({

  list: this.data.list

  })

  },

 多程序小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。

更多小程序开发案例,尽在:http://www.duochengxu.comkaifa.html 
上一篇 微信小程序音乐播放器,音乐播放器小程序制作步骤(音乐排行榜) ... ... 下一篇 微信小程序定位权限开启或关闭怎么控制
论坛资讯同步说明,本文同步自论坛:bbs.miaozhizuo.com,如您在论坛注册成为会员用户并且发帖,则默认论坛文章同步协议,协议内容请移步论坛查看!

          在线客服

            点击这里给我发消息

          VIP咨询
         点击这里给我发消息

          咨询热线

   17080039991

      (免费拨打)

          代理招商

   178-9531-8531

[关闭]
随手APP微信

官方微信自助客服

[关闭]