小程序左滑编辑删除

小程序原生没有左滑功能 利用 view 的 bindtouchstart 和 bindtouchmove 方法来监听到控件的左滑，在左滑或者点击时，改变各控件的样式，以达到左滑编辑删除效果

Demo地址：

https://github.com/muyan091115/leftSlide.git

一、在 wxml 中写入表格和各控件 并绑定监听方法

  
    
    
  

  编辑
  删除

监听方法：

• bindtouchstart
• bindtouchmove
  通过各行数据的 isTouchMove 属性 来判断 左滑状态和正常状态的样式

二、设置个控件样式，偏移量，和动画的时长

 

.cellContent1 {
  width: 746rpx;
  height: 200rpx;
  background-color: lightblue;
  border: 2rpx solid black;
}

.touch-item1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
}
 
.content1 {
  width: 100%;
  line-height: 50rpx;
  margin-right: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(300rpx);
  transform: translateX(300rpx);
  margin-left: -300rpx;
}
 
.del1 {
  background-color: #20aa3a;
  width: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  -webkit-transform: translateX(300rpx);
  transform: translateX(300rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  
}

.del2 {
  background-color: orangered;
}
 
.touch-move-active1 .content1, .touch-move-active1 .del1 {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 
.row1 {
  display: flex;
  flex-direction: row;
}
 
.column1 {
  display: flex;
  flex-direction: column;
}
 
.full_width1 {
  width: 100%;
}

三、在js中初始化数据，并捕获用户动作，分发

const App = getApp();

Page({
  data: {
    items: [
      {
        name: "1"
      },
      {
        name: "2"
      },
      {
        name: "3"
      }
    ]
  },

  //手指触摸动作开始 记录起点X坐标
  touchstart: function (e) {
    //开始触摸时 重置所有删除
    let data = App.touch._touchstart(e, this.data.items)
    this.setData({
      items: data
    })
  },

  //滑动事件处理
  touchmove: function (e) {
    let data = App.touch._touchmove(e, this.data.items)
    this.setData({
      items: data
    })
  },

  //删除事件
  del: function (e) {
    wx.showModal({
      title: '提示',
      content: '确认要删除此条信息么？',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          that.data.items.splice(e.currentTarget.dataset.index, 1)
          that.setData({
            items: that.data.items
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  //修改
  edit: function (e) {
    wx.showToast({
      title: '编辑',
      icon: 'success',
      duration: 2000
    })


  },

  onLoad: function () {
  },
})

四、在touch.js 中处理用户动作，在app.js中导入

var startX
var startY
class touch {

  constructor() {
  }

  _touchstart(e, items) {
    console.log("touchstart---:",items);
    //开始触摸时 重置所有删除
    items.forEach(function (v, i) {
      console.log("touchstart===:", v.isTouchMove);
      if (v.isTouchMove) //只操作为true的
        v.isTouchMove = false;
    })

    startX = e.changedTouches[0].clientX
    startY = e.changedTouches[0].clientY

    return items
  }

  _touchmove(e, items) {
    var index = e.currentTarget.dataset.index, //当前索引
      touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
      //获取滑动角度
      angle = this._angle({
        X: startX,
        Y: startY
      }, {
          X: touchMoveX,
          Y: touchMoveY
        });
    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
      }
    })
    return items
  }

  _angle(start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  }
}

export default touch

_touchstart：用户点击时获取xy位置，并重置左滑状态
_touchmove：移动时根据初始位置和偏移量计算
export default touch：让外部可以使用

app.js 中导入：

import touch from '/index/touch.js'

App({

  touch: new touch(),

  onLaunch: function () {

  }
})