EveryLike/pages/template/drop-card/card/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 {
    options: {
      virtualHost: true
    },
    data() {
      return {
        $elementMap: new Map<string, UniElement>(),
        x: 0 as number,
        y: 0 as number,
        // 飘走的卡片计数
        floatCount: 0 as number
      }
    },
    props: {
      img: {
        type: String,
        default: "https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/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() {
      screenWidth = uni.getWindowInfo().screenWidth
      screenHeight = uni.getWindowInfo().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()
      })

    },
    unmounted() {
      uni.$off('uni-drop-card-float')
    },
    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 {
        const elementMap = this.$data['$elementMap'] as Map<string, UniElement>
        let element : UniElement | null = elementMap.get(refName)
        if (element == null) {
          element = this.$refs[refName] as UniElement;
          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()
        // #ifdef WEB
        //阻止默认行为
        e.preventDefault()
        // #endif
      },
      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
        }

        const _this = this
        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 (Math.floor(k) != 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(Math.floor(_x * -0.05), Math.floor(_y * -0.05), () => {
            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:95%;
    height: 0px;
    position: absolute;
    top: 0px;
    /* left: 0px; */
    margin: 0 12px;
    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: 100%;
    height: 0px;
    border-radius: 10px;
  }

  .state {
    top: 10px;
    left: 10px;
    width: 86%;
    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>