小程序左滑删除功能

很多列表信息都会存在左滑出现删除等操作，就像QQ里的一样

实现方式：

通过小程序中的触摸事件来改变对应列表的样式

wxml

<view class='team-list'>
       <block wx:for='{{memberList}}' wx:key=''>
          <view class='team-item {{item.isMove?"touch-active":""}}' data-index='{{index}}' bindtouchstart='touchstart' bindtouchmove='touchmove'>
            <view class='team-item-left' style='border-bottom:1rpx solid #ccc;'>
              <view>{{index}}</view>
            </view>
            <view class='team-item-option'>
              <view class='delete' bindtap='deleteMember' data-id='{{item.openId}}'>删除</view>
              <view class='makeover' bindtap='makeover' data-id='{{item.openId}}'>转让团队</view>
            </view>
          </view>
       </block>
</view>

wxss

.team-item{
  width: 100%;
  height: 120rpx;
  display: flex;
  box-sizing: border-box;
  padding-left: 34rpx;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.team-item-left{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transform: translateX(260rpx);
  margin-left: -260rpx;
  transition: all 0.4s;
  border-bottom:1rpx solid #ccc;
}
.team-item-option{
  width: 260rpx;
  height: 100%;
  display: flex;
  transform: translateX(260rpx);
  transition: all 0.4s;
}
.team-item-option>view{
  width: 50%;
  height: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
}
.team-item-option>view:first-child{
  background-color: #FC4D4D;
}
.team-item-option>view:last-child{
  background-color: #3D83FD;
}
.touch-active>view{
  transform: translateX(0);
}

js

Page({
    data:{
        memberList:[
            {id:1,isMove:false},
            {id:2,isMove:false},
            {id:3,isMove:false},
            {id:4,isMove:false},
            {id:5,isMove:false},
        ],
        startX:'',
        startY:'',
    },

    // 左滑
    touchstart(e){
        this.data.memberList.map(ele=>{
            // 将所有项全部置于未滑动状态
            if(ele.isMove){
                ele.isMove=false;
            }
            this.setData({
                startX:e.changedTouches[0].clientX,
                startY:e.changedTouches[0].clientY,
                memberList: this.data.memberList
            })
        })
    },
    touchmove(e){
        let index=e.currentTarget.dataset.index,
            startX=this.data.startX,
            startY=this.data.startY,
            touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
            touchMoveY = e.changedTouches[0].clientY; //滑动变化坐标
            angle=this.angle(
                {x:startX,y:startY},
                {x:touchMoveX,y:touchMoveY}
            );
        if(Math.abs(angle)>30) return;
        if(startX-touchMoveX>=30){
            this.setData({
                [`memberList[${index}].isMove`]: true
            })
        }
    },
    // 计算滑动角度
    angle(start,end){
        let x=end.x-start.x,
            y=end.y-start.y;
        return 360*Math.atan(y/x)/(Math.PI)
    }
})

效果图：