yihuo/pages/award/barrageY.vue

<template>
    <view class="wrapper" :style="{ paddingTop: top + 'px' }">
        <view class="scroll-content" :animation="animationData" @transitionend="animalEnd">
            <view class="item" v-for="(item, index) in data" :key="index">
                <image :src="resource.barrage" class="bg" />
                <image
                    :src="item.avatar"
                    class="image"
                    style="display: inline-block; vertical-align: middle"
                />
                <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>
                        <image
                            :src="item.cover"
                            class="marginL5 radius4"
                            style="width: 40rpx; height: 40rpx"
                        />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

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

export default {
    props: {
        top: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            resource,
            data: null,
            LEVEL_MAP,
            animationData: null
        }
    },
    created() {
        this.animation = wx.createAnimation({
            timingFunction: 'linear'
        })
    },
    beforeDestroy() {
        this.animation = null
        this.animationData = null
    },
    methods: {
        start(value) {
            this.data = value
            this.$nextTick(() => {
                this.startAnimal()
            })
        },
        startAnimal() {
            this.animation.translateY(0).step({
                duration: 0
            })
            this.animationData = this.animation.export()
            setTimeout(() => {
                const lenght = this.data.length
                this.animation.translateY(-lenght * 37).step({
                    duration: lenght * 1000
                })
                this.animationData = this.animation.export()
            }, 100)
        },
        animalEnd() {
            this.startAnimal()
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    position: relative;
    height: 260rpx;
    width: 370rpx;
    overflow: hidden;
}
.scroll-content {
    position: relative;
    height: 260rpx;
    white-space: nowrap;
    width: 370rpx;
}
.bg {
    position: absolute;
    width: 320rpx;
    height: 60rpx;
    top: -6rpx;
    left: 0rpx;
    opacity: 0.6;
}

.item {
    position: relative;
    margin-left: 28rpx;
    padding-left: 8rpx;
    margin-bottom: 24rpx;
    height: 60rpx;
    border-radius: 24rpx;
    background: rgba($color: #000000, $alpha: 0.2);
    // border: 1rpx solid rgba(255, 255, 255, 0.2);
    // overflow: hidden;
    .image {
        width: 48rpx;
        height: 48rpx;
        border-radius: 24rpx;
        margin-left: -2rpx;
    }
    .context {
        padding: 0 20rpx;
        color: #fff;
        font-size: 20rpx;
        .text {
            opacity: 0.7;
        }
    }
}
</style>