1、效果图

<!-- 弹幕 -->
<div style="height: 88px"><van-barragev-model="list"duration="5000":rows="rows":gap="gap":loop="loop"style="--move-distance: -345px"
><div class="video" style="width: 345px; height: 98px"></div></van-barrage>
</div>import { ref, onMounted, watchEffect } from 'vue'
const defaultList = ref([{ id: 1, text: '可定制3' },{ id: 2, text: '可定制4' },{ id: 3, text: '可定制5' },{ id: 4, text: '可定制6' },{ id: 5, text: '可定制7' },{ id: 6, text: '可定制8' }
])const list = ref([])
const rows = ref(3) // 设置弹幕行数为3
const gap = ref(20) // 设置弹幕之间的左右间距为10px
const loop = ref(true) // 设置弹幕循环播放
let intervalId
const changeTabs = e => {defaultList.value = [{ id: 1, text: '可定制3' },{ id: 2, text: '可定制4' },{ id: 3, text: '可定制5' },{ id: 4, text: '可定制6' },{ id: 5, text: '可定制7' },{ id: 6, text: '可定制8' }]list.value = []if (e == 1) {//循环播放弹幕intervalId = setInterval(() => {if (defaultList.value.length > 0) {const firstWish = defaultList.value.shift() // 移除第一个弹幕list.value.push(firstWish) // 将第一个弹幕添加到末尾defaultList.value.push(firstWish) // 将第一个弹幕添加到末尾}}, 1000) // 每1秒移动一次弹幕} else {clearInterval(intervalId) //避免弹幕重叠}//检测用户是否离开当前页面，解决用户离开此页面之后又重新进来，造成的短暂弹幕重叠问题document.addEventListener('visibilitychange', function (e) {let state = document.visibilityStateif (state === 'hidden') {console.log('用户离开了')clearInterval(intervalId) //避免弹幕重叠} else if (state === 'visible') {console.log('回来了')//循环播放弹幕intervalId = setInterval(() => {if (defaultList.value.length > 0) {const firstWish = defaultList.value.shift() // 移除第一个弹幕list.value.push(firstWish) // 将第一个弹幕添加到末尾defaultList.value.push(firstWish) // 将第一个弹幕添加到末尾}}, 1000) // 每1秒移动一次弹幕}})
}//tabs已激活状态
:deep(.van-tab--card.van-tab--active) {background: rgba(0, 161, 152, 0.1);border-radius: 4px;color: #00a198;
}
//tabs未激活状态背景
:deep(.van-tab--shrink) {background: rgba(167, 167, 167, 0.1);border-radius: 4px;// color:red;
}
//tabs未激活状态文字
:deep(.van-tab--card) {font-family:PingFangSC,PingFang SC;font-weight: 400;font-size: 12px;color: #666666;line-height: 17px;text-align: left;font-style: normal;margin-right: 20px;width: 56px;height: 21px;
}
.van-tabs_div {margin-top: 10px;margin-bottom: 14px;
}