hlm_pl_mall_h5/pages/member/live/child/like.vue

<template>
    <cover-view class="div like-wraper">
        <cover-view class="div animation" @click="like">
          <cover-image v-if="aniUrl.length" mode="widthFix" :src="aniUrl[index]" class="img like-icon" :class="animation ? 'gka-wrap' : ''"/>
        </cover-view>
    </cover-view>
</template>

<script>
// import aniUrl from '@/static/image/live/like-animation-10.png'
export default {
  props: {},
  data () {
    return {
      animation: false,
      aniUrl:[],
      index:0
    }
  },
  methods: {
    like () {
      if (!this.animation) {
        this.animation = true
        const timmer = setInterval(() => {
          if(this.index<17){
            this.index++
          }else{
            this.animation = false
            this.index=0
            clearInterval(timmer)
          }
        }, 50)
        this.$emit('like')
      } else {
        
      }
    },
    getImage(index){
      var src=''
      if(!index){
        src='like'
      }else{
        src='like-animation-'+index
      }
      uni.getImageInfo({
          src: '/static/image/live/'+src+'.png',
          success: (image) => {
              this.aniUrl[index] = image.path
              this.$forceUpdate()
          },fail: (error) => {
          }
      })
    },
  },
  created() {
    for(var i=0;i<18;i++){
      this.getImage(i)
    }
  }
}
</script>
<style lang="scss" scoped>
    .like-icon {
        width: 64rpx;
    }
    .like-wraper {
        position: relative;
        bottom: -20rpx;
    }
    .gka-wrap {
        width: 130rpx;
    }
    .animation {
      /*  #ifndef  APP-PLUS-NVUE  */
      display: flex;
      /*  #endif  */
      /*  #ifdef  APP-PLUS-NVUE  */
      flex-direction: row;
      /*  #endif  */
      align-items: flex-end;
      justify-content: center;
        width: 130rpx;
    }
</style>