yihuo/pages/award/barrage.vue

<template>
    <view class="wrapper" :style="{ paddingLeft: left + 'px' }">
        <view class="scroll-content" :animation="animationData" @transitionend="animalEnd">
            <view class="item" v-for="(item, index) in data" :key="index">
                <view class="avatarBox">
                    <image :src="item.avatar" class="avatar" />
                    <image :src="item.cover" class="product" />
                </view>
                <view class="context" style="display: inline-block">
                    <view class="flex-align">
                        <text class="text">{{ item.nickname }}购买了</text>
                        <text :style="{ color: LEVEL_MAP[item.level].color }" class="marginX2">
                            {{ LEVEL_MAP[item.level].title }}
                        </text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { LEVEL_MAP } from '@/utils/config'

    export default {
        props: {
            left: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                data: null,
                data1: null,
                data2: null,
                LEVEL_MAP,
                animationData: null
            }
        },
        created() {
            this.animation = wx.createAnimation({
                timingFunction: 'linear'
            })
        },
        beforeDestroy() {
            this.animation = null
            this.animationData = null
        },
        methods: {
            start(value) {
                let length = value.length
                this.data1 = value.slice(0, length / 2)
                this.data2 = value.slice(length / 2 + 1, length + 1)
                this.data = value
                this.$nextTick(() => {
                    this.startAnimal()
                })
            },
            startAnimal() {
                this.animation.translateX(0).step({
                    duration: 0
                })
                this.animationData = this.animation.export()
                setTimeout(() => {
                    const lenght = this.data1.length
                    this.animation.translateX(-lenght * 100).step({
                        duration: lenght * 2000
                    })
                    this.animationData = this.animation.export()
                }, 100)
            },
            animalEnd() {
                this.startAnimal()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .scroll-content {
        position: relative;
        white-space: nowrap;
        width: 100%;
    }

    .item {
        display: inline-block;
        margin-left: 10rpx;
        border-radius: 30rpx;
        background: rgba($color: #ffffff, $alpha: 0.4);
        // border: 1rpx solid rgba(255, 255, 255, 0.2);
        overflow: hidden;
        padding: 8rpx;
        .avatarBox {
            position: relative;
            width: 60rpx;
            display: inline-block;
        }
        .avatar {
            width: 48rpx;
            height: 48rpx;
            border-radius: 24rpx;
            margin-left: -2rpx;
            display: inline-block;
            vertical-align: middle;
        }
        .product {
            width: 36rpx;
            height: 36rpx;
            background: #ffffff;
            border-radius: 50%;
            position: absolute;
            right: 0rpx;
            bottom: 0;
        }
        .context {
            padding: 0 20rpx;
            color: rgba(0, 0, 0, 0.4);
            font-size: 20rpx;
            .text {
                opacity: 0.7;
            }
        }
    }
</style>