找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序 向左滑动删除功能的实现

[复制链接]
查看: 79|回复: 1
最佳答案
0 

13

主题

17

帖子

754

积分

专家路上

积分
754
 楼主| 发表于 2017-10-11 14:48:20 | 显示全部楼层 |阅读模式
这篇文章主要介绍了微信小程序 向左滑动删除功能的实现的相关资料,需要的朋友可以参考下

微信小程序 向左滑动删除功能的实现

实现效果图:
2017031011475623.gif

实现代码:

1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件
  1. <view class="container">
  2. <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">
  3.   <view class="content">{{item.content}}</view>
  4.   <view class="del" catchtap="del" data-index="{{index}}">删除</view>
  5. </view>
  6. </view>
复制代码

2、wxss flex布局、css3动画
  1. .touch-item {
  2. font-size: 14px;
  3. display: flex;
  4. justify-content: space-between;
  5. border-bottom:1px solid #ccc;
  6. width: 100%;
  7. overflow: hidden
  8. }
  9. .content {
  10. width: 100%;
  11. padding: 10px;
  12. line-height: 22px;
  13. margin-right:0;
  14. -webkit-transition: all 0.4s;
  15. transition: all 0.4s;
  16. -webkit-transform: translateX(90px);
  17. transform: translateX(90px);
  18. margin-left: -90px
  19. }
  20. .del {
  21. background-color: orangered;
  22. width: 90px;
  23. display: flex;
  24. flex-direction: column;
  25. align-items: center;
  26. justify-content: center;
  27. color: #fff;
  28. -webkit-transform: translateX(90px);
  29. transform: translateX(90px);
  30. -webkit-transition: all 0.4s;
  31. transition: all 0.4s;
  32. }
  33. .touch-move-active .content,
  34. .touch-move-active .del {
  35. -webkit-transform: translateX(0);
  36. transform: translateX(0);
  37. }
复制代码

3、js 注释很详细
  1. var app = getApp()
  2. Page({
  3. data: {
  4.   items: [],
  5.   startX: 0, //开始坐标
  6.   startY: 0
  7. },
  8. onLoad: function () {
  9.   for (var i = 0; i < 10; i++) {
  10.    this.data.items.push({
  11.     content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",
  12.     isTouchMove: false //默认全隐藏删除
  13.    })
  14.   }
  15.   this.setData({
  16.    items: this.data.items
  17.   })
  18. },
  19. //手指触摸动作开始 记录起点X坐标
  20. touchstart: function (e) {
  21.   //开始触摸时 重置所有删除
  22.   this.data.items.forEach(function (v, i) {
  23.    if (v.isTouchMove)//只操作为true的
  24.     v.isTouchMove = false;
  25.   })
  26.   this.setData({
  27.    startX: e.changedTouches[0].clientX,
  28.    startY: e.changedTouches[0].clientY,
  29.    items: this.data.items
  30.   })
  31. },
  32. //滑动事件处理
  33. touchmove: function (e) {
  34.   var that = this,
  35.    index = e.currentTarget.dataset.index,//当前索引
  36.    startX = that.data.startX,//开始X坐标
  37.    startY = that.data.startY,//开始Y坐标
  38.    touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
  39.    touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
  40.    //获取滑动角度
  41.    angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
  42.   that.data.items.forEach(function (v, i) {
  43.    v.isTouchMove = false
  44.    //滑动超过30度角 return
  45.    if (Math.abs(angle) > 30) return;
  46.    if (i == index) {
  47.     if (touchMoveX > startX) //右滑
  48.      v.isTouchMove = false
  49.     else //左滑
  50.      v.isTouchMove = true
  51.    }
  52.   })
  53.   //更新数据
  54.   that.setData({
  55.    items: that.data.items
  56.   })
  57. },
  58. /**
  59.   * 计算滑动角度
  60.   * @param {Object} start 起点坐标
  61.   * @param {Object} end 终点坐标
  62.   */
  63. angle: function (start, end) {
  64.   var _X = end.X - start.X,
  65.    _Y = end.Y - start.Y
  66.   //返回角度 /Math.atan()返回数字的反正切值
  67.   return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  68. },
  69. //删除事件
  70. del: function (e) {
  71.   this.data.items.splice(e.currentTarget.dataset.index, 1)
  72.   this.setData({
  73.    items: this.data.items
  74.   })
  75. }
  76. })
复制代码
回复

使用道具 举报

最佳答案
0 

0

主题

6

帖子

39

积分

新人求带

积分
39
发表于 昨天 11:32 | 显示全部楼层
感谢 支持
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com