drop-card.uvue

<template>
  <view class="root">
    <view class="card"
      :style="{'top':Math.abs(x)/-60 + 90 +'px',transform:'scale('+(movePercent/10+0.80)+')','height':cardHeight+'px'}">
      <image class="user-img" :src="userList[0]"></image>
    </view>
    <view class="card"
      :style="{'top':Math.abs(x)/-30 + 45 +'px',transform:'scale('+(movePercent/10+0.90)+')','height':cardHeight+'px'}">
      <image class="user-img" :src="userList[1]"></image>
    </view>
    <view @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
      :style="{'transform':'translate('+x+'px,'+y+'px) rotate('+x/-30+'deg)','height':cardHeight+'px'}" class="card">
      <image class="user-img" :src="userList[2]"></image>
      <view class="state">
        <image class="state-icon like" :style="{'opacity':x < 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/like.png" mode="widthFix"></image>
        <image class="state-icon dislike" :style="{'opacity':x > 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
  let sX : number = 0,
      sY : number = 0,
      screenWidth : number = 1;
  export default {
    data() {
      return {
        x: 0,
        y: 0,
        cardHeight:1,
        userList: [
          '/static/template/drop-card/1.png',
          '/static/template/drop-card/2.png',
          '/static/template/drop-card/3.png'
        ]
      }
    },
    computed: {
      movePercent() : number {
        return Math.abs(this.x) / screenWidth
      },
      likeOpacity() : number{
        return this.x < 0 ? 0 : this.movePercent * 100
      },
      dislikeOpacity() : number{
        return this.x > 0 ? 0 : this.movePercent * 100
      }
    },
    onLoad() {
      uni.getSystemInfo({
        success: (e) => {
          console.log('e',e);
          screenWidth = e.screenWidth
          this.cardHeight = e.screenHeight - 200
        }
      })
    },
    methods: {
      changeUserList() {
        let user:string = this.userList[this.userList.length - 1]
        this.userList.unshift(user)
        this.userList.pop()
        this.x = 0;
        this.y = 0;
      },
      touchstart(e : TouchEvent) {
        sX = e.touches[0].screenX;
        sY = e.touches[0].screenY;
      },
      touchmove(e : TouchEvent) {
        this.x += e.touches[0].screenX - sX;
        this.y += e.touches[0].screenY - sY;
        sX = e.touches[0].screenX;
        sY = e.touches[0].screenY;
      },
      touchend() {
        if (this.x > screenWidth / 6) {
          let interval : number = 0;
          interval = setInterval(() => {
            this.x += 10
            this.y += 3
            if (this.x > screenWidth) {
              clearInterval(interval)
              this.changeUserList()
            }
          }, 6)
        } else if (this.x < screenWidth * -1 / 6) {
          let interval : number = 0;
          interval = setInterval(() => {
            this.x -= 10
            this.y += 3
            if (this.x < -screenWidth) {
              clearInterval(interval)
              this.changeUserList()
            }
          }, 6)
        } else {
          this.x = 0
          this.y = 0
        }
      }
    }
  }
</script>
<style>
  .root {
    flex: 1;
    position: relative;
  }

  .card {
    width: 700rpx;
    height: 750rpx;
    position: absolute;
    margin: 0 25rpx;
    margin-top: 30px;
    border-radius: 10px;
    color: #FFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }
  
  .user-img{
    border-radius: 10px;
  }
  
  .state {
    top: 20rpx;
    left: 20rpx;
    width: 650rpx;
    padding: 4px;
    position: absolute;
    flex-direction: row;
    justify-content: space-between;
  }
  .state-icon {
    width: 30px;
    height: 30px;
    border: 1px solid #FFF;
    background-color: #FFF;
    padding: 3px;
    border-radius: 100px;
    box-shadow: 0 0 1px #EBEBEB;
  }
</style>