前兩天想做一個(gè)點(diǎn)贊效果，找了一些插件，感覺(jué)不太滿意，于是自己做了一個(gè)，代碼如下：

一、組件代碼

<template>
  <!-- 點(diǎn)贊效果 -->
  <view>
    <template v-if="likeList.length">
      <view
        class="like-effect-wrap"
        v-for="(item, index) in likeList"
        :key="index"
        :style="{ left: item.left + 'px', top: item.top + 'px' }"
      >
        <image
          :src="resource.likeImageUrl"
          mode="widthFix"
          class="like-image"
        ></image>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //資源配置
      resource: {
        //點(diǎn)贊的圖片（自行替換）
        likeImageUrl:
          this.$cnf.resDomains.image +
          '/1/20102/2022/0414/6257ba54a09bdp868.png'
      },
      //內(nèi)部維護(hù)的隊(duì)列
      likeList: [],
      //清理定時(shí)器
      clearTimer: null,
      //點(diǎn)贊時(shí)間key
      likeTimeKey: '_like_effect_time_key_',
      //清理時(shí)間間隔
      clearTimeCell: 5
    }
  },
  created() {
    //開(kāi)啟定時(shí)器
    this.startTimer()
  },
  beforeDestroy() {
    clearInterval(this.clearTimer)
    this.clearTimer = null
    this.likeList = []
  },
  methods: {
    //開(kāi)啟定時(shí)器
    startTimer() {
      clearInterval(this.timer)
      this.clearTimer = setInterval(() => {
        if (this.likeList.length) {
          //現(xiàn)在的時(shí)間
          let currentTime = new Date().getTime() / 1000
          //最近一次點(diǎn)贊的時(shí)間
          let lastLikeTime = this.getCache(this.likeTimeKey)
          if (lastLikeTime && currentTime - lastLikeTime > this.clearTimeCell) {
            //清空點(diǎn)贊列表
            this.likeList = []
          }
        }
      }, 5000)
    },
    //添加一個(gè)贊
    addLike(option = {}) {
      this.likeList.push(option)
      //每次點(diǎn)擊記錄下最近的一次點(diǎn)擊的時(shí)間
      let currentTime = new Date().getTime() / 1000
      this.setCache(this.likeTimeKey, currentTime)
    },
    /**
     *
     * @param {緩存key} key
     * @param {需要存儲(chǔ)的緩存值} value
     * @param {過(guò)期時(shí)間} expire
     */
    setCache(key, value, expire = 0) {
      let obj = {
        data: value, //存儲(chǔ)的數(shù)據(jù)
        time: Date.now() / 1000, //記錄存儲(chǔ)的時(shí)間戳
        expire: expire //記錄過(guò)期時(shí)間，單位秒
      }
      uni.setStorageSync(key, JSON.stringify(obj))
    },
    /**
     *
     * @param {緩存key} key
     */
    getCache(key) {
      let val = uni.getStorageSync(key)
      if (!val) {
        return null
      }
      val = JSON.parse(val)
      if (val.expire && Date.now() / 1000 - val.time > val.expire) {
        uni.removeStorageSync(key)
        return null
      }
      return val.data
    }
  }
}
</script>

<style lang="scss" scoped>
.like-effect-wrap {
  position: absolute;
  //使用動(dòng)畫(huà)
  animation: floatAnimation 4s 1 forwards;
  //下落的動(dòng)畫(huà)
  @keyframes floatAnimation {
    0% {
      transform: scale(0.8) rotate(-10deg);
      opacity: 1;
    }
    100% {
      transform: translateY(-500rpx) scale(1.6) rotate(10deg);
      opacity: 0;
    }
  }
  .like-image {
    width: 100rpx;
  }
}
</style>

二、使用

1.引入組件

import likeEffect from '../like-effect'
export default {
  components: {
    likeEffect
  },
  ...
}

2.模板里面

<!-- 點(diǎn)贊特效 -->
<like-effect ref="likeEffect" />
<!-- 點(diǎn)贊特效 -->

3.方法使用

submitLike(event) {
  //顯示點(diǎn)贊特效
  this.$refs.likeEffect.addLike({
    left: event.detail.x,    //位置X
    top: event.detail.y    //位置Y
  })
}

三、效果

效果