更新记录

1.0.0(2024-06-12) 下载此版本

1.0.0


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.08 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

gz-bullectChat

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

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

属性说明

属性 是否必填 值类型 默认值 说明
duration Number,Array 5000 滚动时长(ms), 数组时为最慢和最快时长
column Number 1 列数
itemW Number 200 单个弹幕的宽度,目前只支持固定宽度,非固定需自行获取处理
gap Number 50 横向两条弹幕之前的间距
loop Boolean false 循环
style Object false 单行弹幕父组件的样式, 必须给到高度

ref调用

方法 传入参数类型 说明
add Array, Object 对象或者对象数组,需要有id属性,并且不相同,可自行改其他属性
pause 暂停(只对未开始播放的生效)
play 播放(暂停后调用)

使用

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 */

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问