SlideCard.wpy

<template>
  <view class="weslide-card" @touchstart="touchStart" @touchend="touchEnd">
    <view class="weconstant-side" style="flex: {{constantFlex}}">
      <slot name="constant-content"></slot>
    </view>
    <view class="weslide-side" style="flex: {{$_slideFlex}}">
      <slot name="slide-content"></slot>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class extends wepy.component {
  data = {
    $_slideFlex: 0,
    touchStartClientX: 0,
    touchEndClientX: 0
  }
  props = {
    constantFlex: Number,
    slideFlex: Number
  }
  methods = {
    touchStart(e) {
      this.touchStartClientX = e.touches[0] ? e.touches[0].clientX : 0
    },
    touchEnd(e) {
      this.touchEndClientX = e.changedTouches[0]
        ? e.changedTouches[0].clientX
        : 0
      const offsetX =
        Number(this.touchStartClientX) - Number(this.touchEndClientX)
      if (offsetX > 30) {
        this.$_slideFlex = this.slideFlex
      } else if (-offsetX > 30) {
        this.$_slideFlex = 0
      }
    }
  }
}
</script>

<style scoped>
.weslide-card {
  display: flex;
  width: 100%;
}

.weslide-side {
  transition: all 0.5s;
  overflow: hidden;
}
</style>