微信小程序-向左滑动删除

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

实现微信小程序滑动删除

代码在最后总结，中间有过程

---

一、功能演示

二、创建微信小程序项目

创建好微信小程序项目后，在pages页面下新建文件夹这里示例为：circle。
在circle文件夹下创建Page文件名为index

三、页面配置

1.index.js文件，在data下创建数组list，如下

代码如下（示例）：

  data: {
   
    list: [{
   id: "1",title: "商品1"},
      {
   id: "2",title: "商品2"},
    ],
    startX: 0, // 开始X坐标
    startY: 0, // 开始Y坐标
  },

2.index.wxml文件

一个简单的wx:for
代码如下（示例）：

<view wx:for="{
   {list}}" wx:key="id">
  <view class="list">
    <view class="txt">{
   {
   item.title}}</view>
    <view class="del">删除</view>
  </view>
</view>

3.index.wxml文件

一个简单的wx:for
代码如下（示例）：

.list {
   
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid #cccccc;
}
/* 文字标题 */
.txt {
   
  flex-grow: 1;
  width: 100%;
  margin-left: -150rpx;
  background-color: #fff;
}
/* 删除按钮 */
.del {
   
  flex-grow: 0;
  width: 150rpx;
  color: #fff;
  background-color: #fe3e2f;
}
/* 隐藏删除按钮   必须*/
.txt,.del {
   
  /* 水平移动删除按钮，隐藏删除按钮 */
  transform: translateX(150rpx);
  /* 动画时间 */
  transition: all 0.4s;
}

模拟器界面应该如图

四、绑定事件

1.打开index.js文件，在data下创建数组list，如下

代码如下（示例）：

<view class="list" 
      data-index="{
   {index}}" 
      bind:touchstart="touchStart" 
      bind:touchmove="touchMove">
</view>

touchstart：手指触摸开始时
touchmove：手指触摸结束时

  touchStart(e) {
   
    let startX = e.changedTouches[0].clientX; //当点击元素时的X坐标
    let startY = e.changedTouches[0