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

    
        
            
                
                    
                        
                            
                        
                        
                            
                                {{item.title}}
                            
                            
                                
                                    ￥{{item.price}}
                                    免费
                                
                                
                                    --
                                
                            
                            
                                {{item.course_data[0].title}} : {{item.course_data[1].title}}
                            

                        
                    

                
            
        
        
            取消收藏
        
    

/**
     * 显示删除按钮
     */
    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;
}