小程序实现左滑删除组件(个人笔记)

<!--pages/myhouse/component/excercise/excercise.wxml-->
<view class="product-list">
    <view
     class="product-item courseItem"
     wx:for="{{excerciseList}}"
     wx:for-index="index"
     wx:key="id"
    >
        <movable-area class="movable-area">
            <movable-view
            class="movable-view"
             direction="horizontal"
             x="{{item.xmove}}"
             data-productIndex="{{index}}"
             bindtouchstart="handleTouchStart"
             bindtouchend="handleTouchEnd"
             bindchange="handleMovableChange"
            >
                <view class="product-item-wrap">
                    <view
                     class="excercise-list {{index!=excerciseList.length-1?'showBottomBorder':''}}"
                     data-id="{{item.practice_id}}"
                     bindtap="handleGoExcerciseDetail"
                     wx:for="{{excerciseList}}"
                     wx:key="id"
                    >
                        <view class="cover">
                            <image class="cover_img" mode="aspectFit" src="{{item.savename}}" />
                        </view>
                        <view class="content">
                            <view class="list-title">
                                {{item.title}}
                            </view>
                            <view class="price" wx:if="{{item.participate_type!=3}}">
                                <view wx:if="{{sty!='ios'}}">
                                    <text wx:if="{{item.price>0}}" class="price_num"><text class="moeny_logo">￥</text>{{item.price}}</text>
                                    <text wx:else>免费</text>
                                </view>
                                <view wx:else>
                                    --
                                </view>
                            </view>
                            <view class="course_title" wx:else>
                                {{item.course_data[0].title}} : {{item.course_data[1].title}}
                            </view>

                        </view>
                    </view>

                </view>
            </movable-view>
        </movable-area>
        <view class="delete-btn" data-id="{{item.practice_id}}" bindtap="handleCancel">
            <view class="cancel">取消收藏</view>
        </view>
    </view>
</view>

/**
     * 显示删除按钮
     */
    showDeleteButton: function(e) {
        let productIndex = e.currentTarget.dataset.productindex
        this.setXmove(productIndex, -65)
    },

    /**
     * 隐藏删除按钮
     */
    hideDeleteButton: function(e) {
        let productIndex = e.currentTarget.dataset.productindex
        this.setXmove(productIndex, 0)
    },

    /**
     * 设置movable-view位移
     */
    setXmove: function(productIndex, xmove) {
        let productList = this.data.productList
        productList[productIndex].xmove = xmove
        this.setData({
            productList: productList
        })
    },

    /**
     * 处理movable-view移动事件
     */
    handleMovableChange: function(e) {
        if (e.detail.source === 'friction') {
            if (e.detail.x < -30) {
                this.showDeleteButton(e)
            } else {
                this.hideDeleteButton(e)
            }
        } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
            this.hideDeleteButton(e)
        }
    },

    /**
     * 处理touchstart事件
     */
    handleTouchStart(e) {
        this.startX = e.touches[0].pageX
    },

    /**
     * 处理touchend事件
     */
    handleTouchEnd(e) {
        if (e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {
            this.showDeleteButton(e)
        } else if (e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
            this.showDeleteButton(e)
        } else {
            this.hideDeleteButton(e)
        }
    },

    /**
     * 取消收藏
     */
    handleCancel(e) {
        var params = {
           ...
        }
        api._post('api/collection', params).then(res => {
                wx.showToast({
                    title: '取消收藏成功',
                    icon: 'none',
                    duration: 1500
                })
        })
    },

/* pages/myhouse/component/excercise/excercise.wxss */

.live {
    width: 100%;
    display: flex;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
}

.product-list .product-item {
    /* padding: 30rpx; */
    position: relative;
    width: 100vw;
    /* border-bottom: 1rpx solid #eee; */
    box-sizing: border-box;
    background: #fff;
    z-index: 999;
    display: flex;
}

.product-list .product-item .movable-area {
    height: 222rpx;
    width: calc(100vw - 120rpx);
}

.product-list .product-item .movable-view {
    height: 222rpx;
    width: 100vw;
    background: #fff;
    z-index: 999;
}

.touch-item .delete-btn,
.product-list .product-item .delete-btn {
    width: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #009DFF;
    color: #fff;
    font-size: 29rpx;
}

.delete-btn .cancel {
    width: 60rpx;
}

.product-list .product-item-wrap {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.product-item-wrap .excercise-list {
    display: flex;
    padding: 30rpx 0 0 30rpx;
}

.showBottomBorder {
    border-bottom: 1rpx solid #ECECEC;
}

.excercise-list .cover {
    width: 288rpx;
    height: 162rpx;
    overflow: hidden;
    border-radius: 6rpx;
    background-color: #eee;
    margin-right: 20rpx;
}

.excercise-list .cover .cover_img {
    width: 100%;
    height: 100%;
}

.excercise-list .content {
    padding: 10rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.excercise-list .content .list-title {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #242728;
}

.excercise-list .content .price {
    text-align: right;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #35B36E;
}

.price .price_num {
    font-size: 40rpx;
    color: #EE464A;
}

.content .price .moeny_logo {
    font-size: 24rpx;
}

.excercise-list .content .course_title {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #85888D;
}

.excercise-list .content .list-title,
.excercise-list .content .course_title {
    width: 376rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-title {
    height: 103rpx;
    line-height: 103rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(220, 220, 221, 1);
    text-align: center;
}