123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- <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>
|