本文共 2599 字，大约阅读时间需要 8 分钟。

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

在微信小程序中，实现左滑动删除功能需要从布局、样式和逻辑三个方面综合考虑。本文将分步骤详细介绍实现过程。

一、组件布局

在布局设计上，建议使用一个包裹整个内容的view，内部采用flex布局。每个项目项分为两部分：左边内容区域和右边删除按钮。具体实现方式如下：

     
        
           
              
             
            
      
               删除      
          
       
    
   

二、样式优化

在WXSS中，定义样式如下：

.cart {  width: 100%;  height: 100%;  box-sizing: border-box;}.item {  margin-bottom: 15rpx;  background-color: #fff;  padding: 20rpx 10rpx;  padding-right: 0;  display: flex;  box-sizing: border-box;  height: 220rpx;}.item-left {  display: flex;  justify-content: start;  align-items: center;  width: 100%;  margin-left: -140rpx;  transform: translateX(140rpx);  transition: all 0.4s;}.delete {  width: 140rpx;  background-color: #ffcccc;  display: flex;  justify-content: center;  align-items: center;  font-size: 36rpx;  color: #fff;  transform: translateX(150rpx);  transition: all 0.4s;}

三、动画效果

当用户滑动时，删除按钮应随之变换位置。通过设置类触发动画：

.touch-move-active .item-left,.touch-move-active .delete {  transform: translateX(0);}

四、逻辑实现

在JavaScript中，处理触摸事件：

const pages = {  cart: {    data: {      startX: 0,      startY: 0,      dataList: [        {          id: 1,          title: "小米真无线蓝牙耳机 Air 2",          price: 278,          num: 1        },        // 其他项目项      ]    },    touchStart(e) {      this.data.startX = e.touches[0].clientX;      this.data.startY = e.touches[0].clientY;      this.data.dataList.forEach(item => item.isTouchMove = true);      this.setData({        dataList: this.data.dataList,        startX: this.data.startX,        startY: this.data.startY      });    },    touchMove(e) {      const moveX = e.changedTouches[0].clientX;      const moveY = e.changedTouches[0].clientY;      const angle = this.angle({        X: this.data.startX,        Y: this.data.startY      }, {        X: moveX,        Y: moveY      });      this.data.dataList.forEach((item, index) => {        if (Math.abs(moveX - this.data.startX) > 150) return;        if (angle > 30) return;        if (moveX > this.data.startX) {          item.isTouchMove = false;        } else {          item.isTouchMove = true;        }      });      this.setData({        dataList: this.data.dataList      });    },    delItem(e) {      const id = e.currentTarget.dataset.id;      this.data.dataList = this.data.dataList.filter(item => item.id !== id);      this.setData({        dataList: this.data.dataList      });    },    angle(start, end) {      const deltaX = end.X - start.X;      const deltaY = end.Y - start.Y;      return 360 * Math.atan(deltaY / deltaX) / (2 * Math.PI);    }  }};

通过以上步骤，可以实现左滑动删除功能。记得每次初始时重新初始化数据，并在删除时更新界面状态。

转载地址：http://cincz.baihongyu.com/