更新记录

1.0.0（2024-06-12） 下载此版本

1.0.0

平台兼容性

uni-app

其他

gz-bullectChat

项目测试组件，一般不维护，可参考改造 适用于 宽度固定的 弹幕滚动，如横幅，中奖通知等 滚动完成后自动销毁，添加大量弹幕时，未到播放时机不会创建，保证只有少量dom 如宽度不固定，需自行改造

小程序 不支持循环 slot，可参考示例项目

属性说明

ref调用

使用

HTML

<gzBullectChatVue ref="gzBullectChatVue" :itemW="200" :column="3" :duration="[1000,5000]" :style="{height: '200rpx'}">
    <!-- #ifndef MP-WEIXIN -->
<template #item="{data}">
    <view class="item">{{data}}</view>
</template>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<template #default="{data}">
    <view v-for="(listItem, i) in data" :key="listItem.key" class="bullectChat" :style="[{height:'200rpx'}]">
        <view v-for="(n,i) in listItem.list" :key="n.id" class="bullectChat-item"
            :style="{'--duration': n.duration + 'ms'}">
            <view class="item">{{data}}</view>
        </view>
    </view>
</template>
<!-- #endif -->
</gzBullectChatVue>

import gzBullectChatVue from '../../uni_modules/gz-bullectChat/components/gz-bullectChat/gz-bullectChat.vue'
components:{ gzBullectChatVue },
methods:{
    add(){ //插入一条弹幕
        this.$refs.gzBullectChatVue.add([{id: 1, text: 'xxx'}, {id: 2, img: 'xxxx'}])
        // this.$refs.gzBullectChatVue?.add({id: 1, text: 'xxx'})
    },
    pause(){
        this.$refs.gzBullectChatVue.pause()
    },
    play(){
        this.$refs.gzBullectChatVue.play()
    }
}

/* #ifdef MP-WEIXIN */
.bullectChat {
    position: relative;
    width: 100vw;
    overflow: hidden;
}

.bullectChat-item {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    animation: move var(--duration) linear forwards;
}

@keyframes move {
    to {
        transform: translateX(-750rpx);
    }
}
/* #endif */