站长资源网络编程 Vue 实现简易多行滚动"弹幕"效果 整理:jimmy2026/7/29浏览2次 站长资源 网络编程 网盘链接 云盘下载 简介看一下效果： 实现任意行数的定时翻滚效果，不使用重复标签的方式，而是根据展示个数判断是否缺省，并添加对应展示个数的重复项来实现。Vue 的演示代码如下： 看一下效果： 实现任意行数的定时翻滚效果，不使用重复标签的方式，而是根据展示个数判断是否缺省，并添加对应展示个数的重复项来实现。 Vue 的演示代码如下： <template> <div class="demo-comment-container"> <div class="scroll-container" :style="{height: `${height/100}rem`}" > <ul class="scroll-ul" :style="{transform: `translate3d(0, ${y/100}rem, 0)`, transition: `${transition}`}" > <div v-for="(item, index) in list" :key="index" v-bind="baseStyle.style" :bgColor="baseStyle.style.bgColor__bg" :style="{ color: rgba(baseStyle.color__nf) }" :class="['c-item-bg', 'c-item', !item.content && 'empty']" > <li class="c-item" > <div class="avatar"> <img v-if="item.content" class="avatar-item" :src="/UploadFiles/2021-04-02/item.photo"> <script> export default { inject: ['rgba'], props: { urlConfig: { type: Object, default: function () { return {} } }, type: { type: String, default: 'hot' }, pageSize: { type: Number, default: 50 }, open: { type: Boolean, default: true }, entry: { type: Object, default: function () { return { type: 1, // 1 文字 2 自定义 text: '', image: '' } } }, number: { type: Number, default: 2 }, }, data () { return { count: 2334, dom: null, height: 0, // 单项高度 y: 0, // 每次移动距离 list: [], // 接口列表 originLength: 0, // 原始数组长度 transition: 'ease all .4s', round: 0 // 需要滚动多少轮 } }, created () { this.getCommentList() }, mounted () { this.dom = document.querySelector('.c-item') // 计算可视区域高度 this.height = 64 * this.number + (12 * (this.number - 1)) }, methods: { getCommentList () { // 接口数据 const _list = [] this.originLength = _list.length const mod = this.originLength % this.number let need = this.originLength < this.number "color: #ff0000">总结 以上所述是小编给大家介绍的Vue 实现简易多行滚动"弹幕"，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！ 上一篇：jQuery实现的图片点击放大缩小功能案例 下一篇：JS实现秒杀倒计时特效 最新资源 群星《奔赴！万人现场 第2期》[FLAC/分轨] 群星《奇妙浪一夏 (上海迪士尼度假区音乐 群星《奇妙浪一夏 (上海迪士尼度假区音乐 【古典音乐】詹姆斯·高威《季节》1993[WA 贝拉芳蒂《卡里普索之王》SACD[WAV+CUE] 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE 群星《欢迎来到我身边 电影原声专辑》[32 群星《欢迎来到我身边 电影原声专辑》[FL 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低 群星《2024好听新歌42》AI调整音效【WAV分 友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 站点地图 SiteMap
看一下效果：
实现任意行数的定时翻滚效果，不使用重复标签的方式，而是根据展示个数判断是否缺省，并添加对应展示个数的重复项来实现。
Vue 的演示代码如下：
<template> <div class="demo-comment-container"> <div class="scroll-container" :style="{height: `${height/100}rem`}" > <ul class="scroll-ul" :style="{transform: `translate3d(0, ${y/100}rem, 0)`, transition: `${transition}`}" > <div v-for="(item, index) in list" :key="index" v-bind="baseStyle.style" :bgColor="baseStyle.style.bgColor__bg" :style="{ color: rgba(baseStyle.color__nf) }" :class="['c-item-bg', 'c-item', !item.content && 'empty']" > <li class="c-item" > <div class="avatar"> <img v-if="item.content" class="avatar-item" :src="/UploadFiles/2021-04-02/item.photo">
<script> export default { inject: ['rgba'], props: { urlConfig: { type: Object, default: function () { return {} } }, type: { type: String, default: 'hot' }, pageSize: { type: Number, default: 50 }, open: { type: Boolean, default: true }, entry: { type: Object, default: function () { return { type: 1, // 1 文字 2 自定义 text: '', image: '' } } }, number: { type: Number, default: 2 }, }, data () { return { count: 2334, dom: null, height: 0, // 单项高度 y: 0, // 每次移动距离 list: [], // 接口列表 originLength: 0, // 原始数组长度 transition: 'ease all .4s', round: 0 // 需要滚动多少轮 } }, created () { this.getCommentList() }, mounted () { this.dom = document.querySelector('.c-item') // 计算可视区域高度 this.height = 64 * this.number + (12 * (this.number - 1)) }, methods: { getCommentList () { // 接口数据 const _list = [] this.originLength = _list.length const mod = this.originLength % this.number let need = this.originLength < this.number "color: #ff0000">总结以上所述是小编给大家介绍的Vue 实现简易多行滚动"弹幕"，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
上一篇：jQuery实现的图片点击放大缩小功能案例
下一篇：JS实现秒杀倒计时特效
最新资源