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

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

实现效果图：

实现代码：

1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件

< view class = "container" >

  < view class = "touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index = "{{index}}" bindtouchstart = "touchstart" bindtouchmove = "touchmove" wx:for = "{{items}}" wx:key = "" >

   < view class = "content" >{{item.content}}</ view >

   < view class = "del" catchtap = "del" data-index = "{{index}}" >删除</ view >

  </ view >

</ view >

2、wxss flex布局、css3动画

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

.touch-item {   font-size : 14px ;   display : flex;   justify- content : space-between;   border-bottom : 1px solid #ccc ;   width : 100% ;   overflow : hidden } .content {   width : 100% ;   padding : 10px ;   line-height : 22px ;   margin-right : 0 ;   -webkit-transition: all 0.4 s;   transition: all 0.4 s;   -webkit-transform: translateX( 90px );   transform: translateX( 90px );   margin-left : -90px } .del {   background-color : orangered;   width : 90px ;   display : flex;   flex- direction : column;   align-items: center ;   justify- content : center ;   color : #fff ;   -webkit-transform: translateX( 90px );   transform: translateX( 90px );   -webkit-transition: all 0.4 s;   transition: all 0.4 s; } .touch-move-active .content, .touch-move-active .del {   -webkit-transform: translateX( 0 );   transform: translateX( 0 ); }

3、js 注释很详细

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

var app = getApp() Page({   data: {    items: [],    startX: 0, //开始坐标    startY: 0   },   onLoad: function () {    for ( var i = 0; i < 10; i++) {     this .data.items.push({      content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦" ,      isTouchMove: false //默认全隐藏删除     })    }    this .setData({     items: this .data.items    })   },   //手指触摸动作开始 记录起点X坐标   touchstart: function (e) {    //开始触摸时 重置所有删除    this .data.items.forEach( function (v, i) {     if (v.isTouchMove) //只操作为true的      v.isTouchMove = false ;    })    this .setData({     startX: e.changedTouches[0].clientX,     startY: e.changedTouches[0].clientY,     items: this .data.items    })   },   //滑动事件处理   touchmove: function (e) {    var that = this ,     index = e.currentTarget.dataset.index, //当前索引     startX = that.data.startX, //开始X坐标     startY = that.data.startY, //开始Y坐标     touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标     touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标     //获取滑动角度     angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });    that.data.items.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     }    })    //更新数据    that.setData({     items: that.data.items    })   },   /**    * 计算滑动角度    * @param {Object} start 起点坐标    * @param {Object} end 终点坐标    */   angle: function (start, end) {    var _X = end.X - start.X,     _Y = end.Y - start.Y    //返回角度 /Math.atan()返回数字的反正切值    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);   },   //删除事件   del: function (e) {    this .data.items.splice(e.currentTarget.dataset.index, 1)    this .setData({     items: this .data.items    })   } })

原文地址：https://www.jb51.net/article/108071.htm