card.uvue

<template>
    <view class="card" ref="card" @touchstart="touchstart($event as TouchEvent)"
      @touchmove="touchmove($event as TouchEvent)" @touchend="touchend" @touchcancel="touchend">
      <image class="card-img" ref="card-img" :src="img"></image>
      <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>
          <!-- cardIndex:{{cardIndex}} -->
      </view>
    </view>
</template>
<script>
  let sX : number = 0,
    sY : number = 0,
    screenWidth : number = 1,
    screenHeight : number = 1,
    floating : boolean = false,
    touchstartAfter : boolean = false;
  export default {
    data() {
      return {
        $elementMap:new Map<string, Element>(),
        x: 0 as number,
        y: 0 as number,
        // 飘走的卡片计数
        floatCount:0 as number
      }
    },
    props: {
      img: {
        type: String,
        default: "/static/template/drop-card/1.jpg"
      },
      cardIndex:{
        type:Number,
        default:0
      }
    },
    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
      }
    },
    mounted() {
      uni.getSystemInfo({
        success: (e) => {
          screenWidth = e.screenWidth;
          screenHeight = e.screenHeight;
        }
      })

      // TODO 需要延迟设置才能生效
      setTimeout(()=>{
        this.setElementStyle('card','height', screenHeight * 0.7 + 'px');
        this.setElementStyle('card-img','height', screenHeight * 0.7 + 'px');
        this.initCardStyle()
      },200)

      uni.$on('uni-drop-card-float',()=>{
        this.floatCount ++
        this.initCardStyle()
      })

    },
    methods: {
      initCardStyle(){
        let _index = (this.cardIndex + this.floatCount)%3
        // console.log('~~~~~~_index:'+_index + ' cardIndex:'+this.cardIndex+' floatCount:'+this.floatCount);
        this.setElementStyle('card','z-index', _index)
        this.setElementStyle('card','margin-top', screenHeight * 0.15 - 30 * _index + 'px');
        this.setElementStyle('card','transform', 'scale('+(0.9 + 0.05 * _index)+')')
      },
      // 工具方法，用于快速设置 Element 的 style
      setElementStyle(refName:string,propertyName : string, propertyStyle : any) : void {
        let element : Element | null = this.$elementMap.get(refName)
        if(element == null){
          element = this.$refs[refName] as Element;
          this.$elementMap.set(refName,element)
        }else{
          // console.log('直接拿');
        }
        element?.style?.setProperty(propertyName, propertyStyle);
      },
      touchstart(e : TouchEvent) {
        // console.log('touchstart')
        if (floating) {
          return // 浮动动画进行中
        }
        sX = e.touches[0].screenX;
        sY = e.touches[0].screenY;
        this.x = 0
        this.y = 0

        touchstartAfter = true
      },
      touchmove(e : TouchEvent) {
        // console.log('touchmove')
        if (!touchstartAfter || floating) {
          return // floating：浮动动画进行中
        }
        this.x += e.touches[0].screenX - sX;
        this.y += e.touches[0].screenY - sY;
        sX = e.touches[0].screenX;
        sY = e.touches[0].screenY;
        this.moveCard()
      },
      touchend() {
        // console.log('touchend')
        touchstartAfter = false
        if(floating){
          return // 浮动动画进行中
        }
        floating = true

        // 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左
        let k:number = 0;
        if (this.x > screenWidth / 10 ) {
          k = 1
        }else if(this.x < screenWidth * -1 / 10){
          k = -1
        }

        function cardTo(x:number,y:number,callback: () => void,speed:number = 10){
          let interval:number = 0
          let acceleration:number = 1
          interval = setInterval(()=>{
            // 加速度
            acceleration += 0.2

            const dx = x - this.x
            if(Math.abs(dx) < 1){
              this.x = x
            }else{
              this.x += dx/speed*acceleration
            }

            const dy = y - this.y
            if(Math.abs(dy) < 1){
              this.y = y
            }else{
              this.y += dy/speed*acceleration
            }

            this.moveCard()
            if( this.x == x && this.y == y){
              clearInterval(interval)
              callback()
            }
          },16)
        }

        if(k.toInt() != 0){
          cardTo(k * screenWidth * 1.3, this.y * 3,()=>{
            //  状态图标变回透明
            this.setElementStyle("state-icon-like",'opacity', 0)
            this.setElementStyle("state-icon-dislike",'opacity', 0)

            // 设置为透明，防止飘回时因为 margin-top 太高，露出来
            this.setElementStyle("card",'opacity', 0)
            setTimeout(()=>{
              this.setElementStyle("card",'opacity', 1)
            },300)

            // 执行卡片飘动后事件，注意uni.$emit是全局事件。其他卡片也会执行
            uni.$emit('uni-drop-card-float',null)
            floating = false
          },8)
        }else{
          const _x:number = this.x
          const _y:number = this.y
          cardTo( (_x*-0.05).toInt() , (_y*-0.05).toInt() ,()=>{
            cardTo(0,0,()=>{
             console.log('bounce')
             floating = false
            },30)
          })
        }
      },
      moveCard() {
        this.setElementStyle("card",
          'transform',
          `translate(${this.x}px,${this.y}px) rotate(${this.x/-30}deg) scale(1)`
        )
        this.setElementStyle("state-icon-like",'opacity', this.x < 0 ? 0 : this.movePercent * 10)
        this.setElementStyle("state-icon-dislike",'opacity', this.x > 0 ? 0 : this.movePercent * 10)
      }
    }
  }
</script>

<style>
  .card {
    width: 700rpx;
    height: 750rpx;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 25rpx;
    margin-top: 50px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    background-color: #FFF;
    transition: margin-top 300ms;
    transition-timing-function: ease-in;
  }

  .card-img {
    width: 700rpx;
    height: 750rpx;
    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>