wwbsr/wxcomponents/vant/swipe-cell/index.vue

<template>
<uni-shadow-root class="vant-swipe-cell-index"><view class="van-swipe-cell" data-key="cell" @click.stop.prevent="onClick" @touchstart="startDrag" @touchmove.stop.prevent="_$self[(catchMove ? 'noop' : '')||'_$noop']($event)" @touchmove.capture="onDrag" @touchend="endDrag" @touchcancel="endDrag">
  <view :style="wrapperStyle">
    <view v-if="leftWidth" class="van-swipe-cell__left" data-key="left" @click.stop.prevent="onClick">
      <slot name="left"></slot>
    </view>
    <slot></slot>
    <view v-if="rightWidth" class="van-swipe-cell__right" data-key="right" @click.stop.prevent="onClick">
      <slot name="right"></slot>
    </view>
  </view>
</view></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'vant/swipe-cell/index'
import { VantComponent } from '../common/component';
import { touch } from '../mixins/touch';
import { range } from '../common/utils';
const THRESHOLD = 0.3;
let ARRAY = [];
VantComponent({
  props: {
    disabled: Boolean,
    leftWidth: {
      type: Number,
      value: 0,
      observer(leftWidth = 0) {
        if (this.offset > 0) {
          this.swipeMove(leftWidth);
        }
      },
    },
    rightWidth: {
      type: Number,
      value: 0,
      observer(rightWidth = 0) {
        if (this.offset < 0) {
          this.swipeMove(-rightWidth);
        }
      },
    },
    asyncClose: Boolean,
    name: {
      type: [Number, String],
      value: '',
    },
  },
  mixins: [touch],
  data: {
    catchMove: false,
  },
  created() {
    this.offset = 0;
    ARRAY.push(this);
  },
  destroyed() {
    ARRAY = ARRAY.filter((item) => item !== this);
  },
  methods: {
    open(position) {
      const { leftWidth, rightWidth } = this.data;
      const offset = position === 'left' ? leftWidth : -rightWidth;
      this.swipeMove(offset);
      this.$emit('open', {
        position,
        name: this.data.name,
      });
    },
    close() {
      this.swipeMove(0);
    },
    swipeMove(offset = 0) {
      this.offset = range(offset, -this.data.rightWidth, this.data.leftWidth);
      const transform = `translate3d(${this.offset}px, 0, 0)`;
      const transition = this.dragging
        ? 'none'
        : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
      this.setData({
        wrapperStyle: `
        -webkit-transform: ${transform};
        -webkit-transition: ${transition};
        transform: ${transform};
        transition: ${transition};
      `,
      });
    },
    swipeLeaveTransition() {
      const { leftWidth, rightWidth } = this.data;
      const { offset } = this;
      if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
        this.open('right');
      } else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
        this.open('left');
      } else {
        this.swipeMove(0);
      }
      this.setData({ catchMove: false });
    },
    startDrag(event) {
      if (this.data.disabled) {
        return;
      }
      this.startOffset = this.offset;
      this.touchStart(event);
    },
    noop() {},
    onDrag(event) {
      if (this.data.disabled) {
        return;
      }
      this.touchMove(event);
      if (this.direction !== 'horizontal') {
        return;
      }
      this.dragging = true;
      ARRAY.filter((item) => item !== this).forEach((item) => item.close());
      this.setData({ catchMove: true });
      this.swipeMove(this.startOffset + this.deltaX);
    },
    endDrag() {
      if (this.data.disabled) {
        return;
      }
      this.dragging = false;
      this.swipeLeaveTransition();
    },
    onClick(event) {
      const { key: position = 'outside' } = event.currentTarget.dataset;
      this.$emit('click', position);
      if (!this.offset) {
        return;
      }
      if (this.data.asyncClose) {
        this.$emit('close', {
          position,
          instance: this,
          name: this.data.name,
        });
      } else {
        this.swipeMove(0);
      }
    },
  },
});
export default global['__wxComponents']['vant/swipe-cell/index']
</script>
<style platform="mp-weixin">
@import '../common/index.css';.van-swipe-cell{position:relative;overflow:hidden}.van-swipe-cell__left,.van-swipe-cell__right{position:absolute;top:0;height:100%}.van-swipe-cell__left{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.van-swipe-cell__right{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
</style>