wxmini/dist/swipe-cell/index.js

import { VantComponent } from '../common/component';
import { touch } from '../mixins/touch';
const THRESHOLD = 0.15;
VantComponent({
    props: {
        disabled: Boolean,
        leftWidth: {
            type: Number,
            value: 0
        },
        rightWidth: {
            type: Number,
            value: 0
        },
        asyncClose: Boolean
    },
    mixins: [touch],
    data: {
        offset: 0,
        draging: false
    },
    computed: {
        wrapperStyle() {
            const { offset, draging } = this.data;
            const transform = `translate3d(${offset}px, 0, 0)`;
            const transition = draging ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)';
            return `
        -webkit-transform: ${transform};
        -webkit-transition: ${transition};
        transform: ${transform};
        transition: ${transition};
      `;
        }
    },
    methods: {
        onTransitionend() {
            this.swipe = false;
        },
        open(position) {
            const { leftWidth, rightWidth } = this.data;
            const offset = position === 'left' ? leftWidth : -rightWidth;
            this.swipeMove(offset);
            this.resetSwipeStatus();
        },
        close() {
            this.set({ offset: 0 });
        },
        resetSwipeStatus() {
            this.swiping = false;
            this.opened = true;
        },
        swipeMove(offset = 0) {
            this.set({ offset });
            offset && (this.swiping = true);
            !offset && (this.opened = false);
        },
        swipeLeaveTransition(direction) {
            const { offset, leftWidth, rightWidth } = this.data;
            const threshold = this.opened ? 1 - THRESHOLD : THRESHOLD;
            // right
            if (direction > 0 && -offset > rightWidth * threshold && rightWidth > 0) {
                this.open('right');
                // left
            }
            else if (direction < 0 && offset > leftWidth * threshold && leftWidth > 0) {
                this.open('left');
            }
            else {
                this.swipeMove();
            }
        },
        startDrag(event) {
            if (this.data.disabled) {
                return;
            }
            this.set({ draging: true });
            this.touchStart(event);
            if (this.opened) {
                this.startX -= this.data.offset;
            }
        },
        onDrag(event) {
            if (this.data.disabled) {
                return;
            }
            this.touchMove(event);
            const { deltaX } = this;
            const { leftWidth, rightWidth } = this.data;
            if ((deltaX < 0 && (-deltaX > rightWidth || !rightWidth)) ||
                (deltaX > 0 && (deltaX > leftWidth || (deltaX > 0 && !leftWidth)))) {
                return;
            }
            if (this.direction === 'horizontal') {
                this.swipeMove(deltaX);
            }
        },
        endDrag() {
            if (this.data.disabled) {
                return;
            }
            this.set({ draging: false });
            if (this.swiping) {
                this.swipeLeaveTransition(this.data.offset > 0 ? -1 : 1);
            }
        },
        onClick(event) {
            const { key: position = 'outside' } = event.currentTarget.dataset;
            this.$emit('click', position);
            if (!this.data.offset) {
                return;
            }
            if (this.data.asyncClose) {
                this.$emit('close', { position, instance: this });
            }
            else {
                this.swipeMove(0);
            }
        }
    }
});