drop-card.uvue

<template>
  <view class="root">
    <template v-for="(item,index) in cardList" :key="index">
      <view class="card" ref="card" @touchstart="touchstart($event as TouchEvent,index)" @touchmove="touchmove($event as TouchEvent,index)" @touchend="touchend" @touchcancel="touchend">
        <image class="card-img" ref="card-img" :src="item"></image>
        <template v-if="index == 2">
          <view class="state">
            <image class="state-icon like" ref="state-icon-like" src="/static/template/drop-card/like.png" mode="widthFix"></image>
            <image class="state-icon dislike" ref="state-icon-dislike" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
          </view>
        </template>
      </view>
    </template>
  </view>
</template>
<script lang="ts">
  let sX : number = 0,
    sY : number = 0,
    screenWidth : number = 1,
    nodesMap = new Map<string, INode[]>();
  export default {
    data() {
      return {
        x: 0,
        y: 0,
        cardList: [
          '/static/template/drop-card/1.jpg',
          '/static/template/drop-card/2.jpg',
          '/static/template/drop-card/3.jpg'
        ] as string[],
        NodesMap: new Map<string, INode[]>(),
      }
    },
    onReady() {
      this.setStyle('card',2,'transitionTimingFunction','ease-in-out');
      this.setStyle('card',2,'transitionProperty','transform');
      
      uni.getSystemInfo({
        success: (e) => {
          // console.log('e',e);
          screenWidth = e.screenWidth;
          let height = e.screenHeight - 200 + 'px'
          for (var i = 0; i < 3; i++) {
            this.setStyle('card',i,'height', height);
            this.setStyle('card-img',i,'height', height);
          }
        }
      })
    },
    watch: {
      x() {
        this.onMove()
      },
      y() {
        this.onMove()
      }
    },
    computed: {
      movePercent() : number {
        return Math.abs(this.x) / (screenWidth/2*3)
      },
      likeOpacity() : number {
        return this.x < 0 ? 0 : this.movePercent * 100
      },
      dislikeOpacity() : number {
        return this.x > 0 ? 0 : this.movePercent * 100
      }
    },
    methods: {
      setStyle(refName:string,index:number,propertyName:string,propertyStyle:any):void{
        let nodes:INode[]|null = nodesMap.get(refName)
        if(nodes == null){
          nodes = this.$refs.get(refName) as INode[]
          nodesMap.set(refName,nodes)
        }else{
          // console.log('直接拿');
        }
        (nodes)[index].style.setProperty(propertyName,propertyStyle);
      },
      onMove() {
        this.setStyle('card',0,'transform', 'scale('+(this.movePercent/10+0.80)+')')
        this.setStyle('card',1,'transform', 'scale('+(this.movePercent/10+0.90)+')')
        this.setStyle('card',2,'transform', 'translateX('+this.x+'px) translateY('+this.y+'px) rotate('+this.x/-30+'deg)')
        
        this.setStyle('state-icon-like',0,'opacity', x < 0 ? 0 : movePercent * 10)
        this.setStyle('state-icon-dislike',0,'opacity', x > 0 ? 0 : movePercent * 10)
      },
      changeCardList() {
        let newArr = this.cardList.slice();
        this.cardList[0] = newArr[2]
        this.cardList[1] = newArr[0]
        this.cardList[2] = newArr[1]
        this.x = 0
        this.y = 0
      },
      touchstart(e : TouchEvent,index:number) {
        if(index != 2){
          return 
        }
        sX = e.touches[0].screenX;
        sY = e.touches[0].screenY;
      },
      touchmove(e : TouchEvent,index:number) {
        if(index != 2){
          return 
        }
        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() {
        // console.log('touchend');
        
        // 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左
        let k:number = 0;
        if (this.x > screenWidth / 6 ) {
          k = 1
        }else if(this.x < screenWidth * -1 / 6){
          k = -1
        }
        // 设置动画时间
        let time = 400;
        this.setStyle('card',2,'transitionDuration',time.toFixed(0));
        
        this.x = screenWidth * 1.5 * k
        this.y = Math.abs(screenWidth * 0.5 * k)
        
        setTimeout(()=>{
          //关闭动画
          this.setStyle('card',2,'transitionDuration',0);
          // 更改卡片上的图片内容
          if(k != 0){
            this.changeCardList()
          }
        },time)
      }
    }
  }
</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);
    z-index: 100;
  }
  
  .card-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;
    opacity: 0;
  }
</style>