Taro 实现 微信小程序滑动删除功能

需求：实现左滑删除功能

image.png

一、代码组成

• SwipeCell.vue : 可左右滑动做删除等其他操作的组件
• SwipeCell.less : 组件的样式表
• combination.js
• GoodsType.vue : 使用滑动组件的页面文件

1、SwipeCell.vue

2、SwipeCell.less

.swipe-cell {
    overflow: hidden;
    position: relative;
    &__left {
        position: absolute;
        top: 0;
        height: 100%;
        left: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .cell {
    }
    &__right {
        position: absolute;
        top: 0;
        height: 100%;
        right: 0;
        transform: translate3d(100%, 0, 0);
    }
}

3、combination.js

/**
 * 获取滑动的方向，垂直、水平
 * @param {*} x
 * @param {*} y
 * @returns horizontal: 水平； vertical: 垂直
 */
export function getDirection (x, y) {
    var MIN_DISTANCE = 10;
    if (x > y && x > MIN_DISTANCE) {
        return 'horizontal';
    }
    if (y > x && y > MIN_DISTANCE) {
        return 'vertical';
    }
    return '';
}

export function resetTouchStatus (that) {
    that.direction = '';
    that.deltaX = 0;
    that.deltaY = 0;
    that.offsetX = 0;
    that.offsetY = 0;
}

4、GoodsType.vue