仿微信消息列表左滑删除(微信小程序)

<!--index.wxml-->
<view>
    <block wx:key="item" wx:for="{{list}}">
        <view class="list" data-index="{{index}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"
         style="right:{{item.right}}rpx">
            <view class="listContent">{{item.content}}</view>
            <view class="delete" bindtap="delItem">删除</view>
        </view>
    </block>
</view>

//index.wxss
.list{
  height: 100rpx;
  width: 100%;
  line-height: 100rpx;
  position: relative;
  box-shadow: 1rpx 1rpx 5rpx grey;
}
 
.delete{  
  width: 160rpx;  
  height: 100%;  
  text-align: center;
  line-height: 100rpx;
  background-color: #d4262f; 
  color: white; 
  position: absolute;  
  top: 0;  
 right: -160rpx;  
}

//index.js
//获取应用实例
const app = getApp()

Page({
    data: {
        //删除按钮的宽度
        bigWidth: 160,
        list: [{
            content: "春眠不觉晓",
            right: 0
        }, {
            content: "处处闻啼鸟",
            right: 0
        }, {
            content: "夜来风雨声",
            right: 0
        }, {
            content: "花落知多少",
            right: 0
        }]
    },
    //事件处理函数
    touchStart(e) {
        let touch = e.touches[0]
        //只能触摸滑动完一个元素后再触摸滑动另一个元素
        for (var index in this.data.list) {
            var item = this.data.list[index]
            item.right = 0
        }
        this.setData({
            list: this.data.list,
            startX: touch.clientX,
        })
    },
    touchMove(e) {
        let touch = e.touches[0]
        //记录当前触摸的元素
        let targetIndex = this.data.list[e.currentTarget.dataset.index]
        //滑动距离=最开始触摸的位置-触摸滑动后所在的位置
        let distance = this.data.startX - touch.clientX
        //向左滑动距离大于等于20时
        if (distance >= 20) {
            //边界限制 超过删除按钮的长度
            if (distance > this.data.bigWidth) {
                distance = this.data.bigWidth
            }
            targetIndex.right = distance
            this.setData({
                list: this.data.list
            })
        } else {
            //没有超过20 自动归位
            targetIndex.right = 0
            this.setData({
                list: this.data.list
            })
        }
    },
    touchEnd(e) {
        //当前停止触摸的元素
        let targetIndex = this.data.list[e.currentTarget.dataset.index]
        //当前停止触摸的元素滑动的距离已经超过删除按钮长度的一半
        if (targetIndex.right >= this.data.bigWidth / 2) {
            targetIndex.right = this.data.bigWidth
            this.setData({
                list: this.data.list
            })
        } else {
            //自动归位
            targetIndex.right = 0
            this.setData({
                list: this.data.list
            })
        }
    },
delItem(e) {
        let arr=this.data.list
        let index=e.currentTarget.dataset.index
        let list=arr.splice(index, 1)
        this.setData({
            list:list
        })
    }
})

关于touchstart touchmove touchend知识链接:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F