uni 小程序 消息弹幕无限滚动

一.先来波效果图(自行拷贝代码查看)

 

 

<view>
        <view v-for="(item,index) in dmData" :key="index">
            <!-- :style="'animation-name:mymove;animation-name:mymove;animation-duration:'+item.times+'s animation-timing-function:linear;animation-fill-mode: forwards;'" -->
            <view  class='asonList-Item'     @animationend="_tipAniEnd" :style="index%2 !=0?'margin-top:100rpx;margin-left:50rpx;':''">
                <view class='avatarBox'>
                    <image src='/static/images/1_15-2.png' class='avatar' mode='aspectFit'></image>
                    <text style="padding-left: 8rpx;font-size: 26rpx;">恭喜{{index}}获得阿玛尼{{index}}...</text>
                </view>
            </view>
        <!--     <view v-if="index%2!=0" class='asonList-Item' @animationend="_tipAniEnd"  >
                <view class='avatarBox'>
                    <image src='/static/images/1_15-2.png' class='avatar' mode='aspectFit'></image>
                    <text style="padding-left: 8rpx;font-size: 26rpx;">恭喜{{index}}获得奖品{{index}}...</text>
                </view>
            </view> -->
        </view>
</view>

.avatarBox {
        display: flex;
        align-items: center;
        margin-right: 135rpx;
        width: 650rpx;
    }
    .dataFlex {
        text-align: right;
        animation: mymove 8s linear forwards infinite;
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
        animation-fill-mode: forwards;
    }

    .avatar {
        width: 85rpx;
        height: 85rpx;
    }

    .aon {
    }

    .asonList-Item {
        position: absolute;
        width: 500rpx;
        margin-right: 120rpx;
        white-space: nowrap;
        display: block;
        animation: mymove 8s linear forwards infinite;
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
        animation-fill-mode: forwards;
    }

    @keyframes mymove {
        from {
            left: 100%;
        }

        to {
            left: -200%;
        }
    }

    @-moz-keyframes mymove

    /* Firefox */
        {
        from {
            left: 100%;
        }

        to {
            left: -200%;
        }
    }

    @-webkit-keyframes mymove

    /* Safari and Chrome */
        {
        from {
            left: 100%;
        }

        to {
            left: -200%;
        }
    }

    @-o-keyframes mymove

    /* Opera */
        {
        from {
            left: 100%;
        }

        to {
            left: -200%;
        }
    }

<script>
    let arr = [{
        id:1,
            content: '11111111111111111111111111',
            nickName: '小海1',
            icon: '/static/images/1_15.png'
        },
        {
            id:2,
            content: '22222222222222222222222222222222',
            nickName: '小海2',
            icon: '/static/images/1_15.png'
        },
        {
            id:3,
            content: '33333333333333333333333',
            nickName: '小海3',
            icon: '/static/images/1_15.png'
        },
        {
            id:4,
            content: '444444444444444444444',
            nickName: '小海4',
            icon: '/static/images/1_15.png'
        },
        {
            id:5,
            content: '555555555555555555555555555',
            nickName: '小海5',
            icon: '/static/images/1_15.png'
        }
    ]
    const app = getApp()
    import common from '@/util/common.js'
    var tipList = [];
    var i = 0;
    var tempList = []; // 缓冲数据
    export default {
        data() {
            return {
                avatarBoy: '/static/images/1_15.png',
                dmData: [],
                animationData: {}
            }
        },
        onShow() {
            var animation = uni.createAnimation({
                duration: 1000,
                timingFunction: 'linear',
            })
            this.animation = animation
            setTimeout(() => {
                this.animation.translateX(-600).step();
                this.animation = animation
            }, 3000)
            var timer = -1
            var ttt;
            ttt = setInterval(() => {
                timer++
                if (timer >= arr.length) {
                    clearInterval(ttt)
                    // this.dmData = []
                    return
                }
                console.log(timer)
                this.dmData.push(arr[timer])
            }, 3000)
            // this.dmData=arr
        },
        methods: {
            _tipAniEnd(e) {
                console.log("end", e)
            },
            animationClick() {
                // 定义动画内容
                this.animation.translateX(-600).step();
                // 导出动画数据传递给data层
                this.animationData = this.animation.export();
            }
        }
    }
</script>

可以用的点个赞，赏脸的送杯奶茶给我..