小程序cell左滑删除

最近在做小程序，有一个左滑删除商品的需求，网上找了很多，最后手写了一个。

发现其实很多地方可以复用。其实封装一个微信的ui组件库也不错吧。

下面是实现的代码，不是组件，组件有时间想封装一个自己用。

wxml部分 在盒子内里面添加一个删除按钮，和需要删除的内容是平级的

<view catchtap="del" data-idx="{{index}}" class="del">取消收藏</view>

给cell添加事件

<view style="transform:translateX({{item.x}}px);" data-idx="{{index}}" bindtouchmove="drawMove" bindtouchstart="drawStart" bindtouchend="drawEnd" class="cell" wx:for="{{collectList}}" wx:key="index">
    <view>内容呀</view>
    <view>内容呀</view>
    <!-- 删除的按钮放到这里  上面是盒子的内容，信息 -->
    <view catchtap="del" data-idx="{{index}}" class="del">删除</view>
</view>

wxss部分

.cell {
    margin: 0 20px
}
.del {
    position: absolute;
    height: 100%;
    width: 120px;
    background-color: red;
    top: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    right: -140px;
}

js部分 需要注意的是需要给每一个对象添加一个x属性，用于盒子的定位 x表示盒子此时所在的位置

data: {
    <!-- 在给这个数组赋值的时候，给其中的每一个对象添加一个x属性  -->
    collectList: [],
    <!-- 记录鼠标触摸开始鼠标x的值 -->
    startX: '',
    <!-- 记录鼠标触摸结束鼠标x的值 -->
    endX: '',
    <!-- 判断页面的姿态是否为滚动， 如果是滚动，就不能左右滑动 -->
    scroll: false,
    <!-- 判断滑动的方向 -->
    judge: false,
  },
  
<!-- 触摸的开始 -->
drawStart: function (e) {
    let idx = e.currentTarget.dataset.idx
    let collectList = [...this.data.collectList]
    let touches = e.touches[0]
    
    if (collectList[idx].x < 0) {
        this.setData({
            judge: true
        })
    } else {
        for (let index = 0; index < collectList.length; index++) {
            collectList[index].x = 0
        }
        this.setData({
            judge: false
        })
    }
    
    this.setData({
        collectList,
        startX: touches.clientX,
        startY: touches.clientY
    })
},

<!-- 鼠标开始移动 -->
drawMove: function (e) {
    if (this.data.scroll) return

    let idx = e.currentTarget.dataset.idx
    let collectList = [...this.data.collectList]
    let touches = e.touches[0]
    let x
    
    if (this.data.judge) {
        x = 120 - (touches.clientX - this.data.startX)
    } else {
        x = this.data.startX - touches.clientX
    }
    
    if (x < 0) {
        x = 0
    } else if (x > 120) {
        x = -120
    } else {
        x = -x
    }
    
    collectList[idx].x = x
    this.setData({
        endX: touches.clientX,
        collectList
    })
},

<!-- 鼠标触摸结束 -->
drawEnd: function (e) {
    let idx = e.currentTarget.dataset.idx
    let collectList = [...this.data.collectList]
    let right = 0

    if (this.data.startX - this.data.endX > 70) {
        right = -120
    } else if (this.data.judge) {
        if (this.data.endX - this.data.startX < 70) {
            right = -120
        }
    }

    collectList[idx].x = right
    this.setData({
        scroll: false,
        collectList,
        startX: 0
    })
},

<!-- 滚动不触发 -->
onPageScroll(e) {
    this.setData({
        scroll: true,
        endX: 0
    })
},

<!-- 删除 -->
async del(e) {
    let idx = +e.currentTarget.dataset.idx
    let collectList = [...this.data.collectList]
    let res = await fetch({
        url: '接口地址',
        data: {<!--参数-->}
    })
    
    if (res === true) {
        let arr = [...collectList]
        
        for (let index = 0; index < collectList.length; index++) {
            if (idx === index) {
                arr.splice(idx, 1)
            }
        }
        this.setData({
            collectList: arr
        })
    } else if (res === false) {
        wx.showToast({
            title: '删除失败',
            icon: 'none',
            duration: 2000
        })
    }
},