基于vue.js实现无缝滚动的两种方法
更新时间：2026年02月27日 09:25:12 作者：Summer.Xia6552
在现代的网页设计中,无缝滚动广告特效已经变得非常流行,这种特效能够吸引用户的注意力,同时展示多个广告内容,这篇文章主要介绍了基于vue.js实现无缝滚动的两种方法,需要的朋友可以参考下
方法一：基于requestAnimationFrame
demo
<template>
<h-page-container class="hoem-page">
<h1>无缝滚动</h1>
<h2>垂直方向</h2>
<div class="container1">
<AutoScroll :data="list" :item-height="110" :limit-move-num="3" :is-rem="false">
<template #item="{ keySuffix }">
<div v-for="(item, index) in list" :key="`${item.id || index}${keySuffix || ''}`" class="card">
<div>{{ item.title }}</div>
<div>{{ item.content }}</div>
</div>
</template>
</AutoScroll>
</div>
<h2>水平方向</h2>
<div class="container2">
<AutoScroll :data="list" :direction="2" :item-width="210" :limit-move-num="3" :is-rem="false">
<template #item="{ keySuffix }">
<div v-for="(item, index) in list" :key="`${item.id || index}${keySuffix || ''}`" class="card">
<div>{{ item.title }}</div>
<div>{{ item.content }}</div>
</div>
</template>
</AutoScroll>
</div>
</h-page-container>
</template>
<script setup>
import { ref } from 'vue'
import AutoScroll from '@/components/AutoScroll.vue'
const list = ref([
{
id: 1,
title: '卡片1',
content: '111'
},
{
id: 2,
title: '卡片2',
content: '222'
},
{
id: 3,
title: '卡片3',
content: '333'
},
{
id: 4,
title: '卡片4',
content: '444'
}
])
</script>
<style lang="scss" scoped>
.hoem-page {
width: 100%;
height: 100vh;
padding: 10px;
}
.container1 {
width: 200px;
height: 300px;
margin: 20px;
overflow: hidden;
.card {
width: 100%;
height: 100px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 10px;
padding: 10px;
}
}
.container2 {
width: 500px;
height: 150px;
margin: 20px;
overflow: hidden;
.card {
width: 200px;
height: 100%;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-right: 10px;
padding: 10px;
}
}
</style>
AutoScroll.vue
<template>
<div class="scroll-list" :style="listStyle" @mouseover="pauseAnimation" @mouseout="animate">
<slot name="item" key-suffix=""></slot> <!-- 原始内容 -->
<template v-if="shouldDuplicate">
<slot name="item" key-suffix="_copy"></slot> <!-- 复制内容，添加后缀 -->
</template>
</div>
</template>
<script setup>
import { ref, onBeforeUnmount, watch, computed } from 'vue'
// 定义滚动方向枚举
const Direction = {
DOWN: 0,
UP: 1,
LEFT: 2,
RIGHT: 3
}
const props = defineProps({
// 列表
data: {
type: Array,
default: () => []
},
// 方向: 0 往下 1 往上 2 向左 3 向右
direction: {
type: Number,
default: 1
},
/**
* 一个列表元素的高度（包含外边距)
* direction为0 往下 1 往上时
*/
itemHeight: {
type: Number,
default: null
},
/**
* 一个列表元素的宽度（包含外边距)
* direction为2 向左 3 向右时
*/
itemWidth: {
type: Number,
default: null
},
// itemHeight的单位是否是rem
isRem: {
type: Boolean,
default: true
},
// 开启无缝滚动的数据量。
limitMoveNum: {
type: Number,
default: 5
},
// 几列
columns: {
type: Number,
default: 1
}
})
// 是否需要复制内容
const shouldDuplicate = computed(() => props.data.length >= props.limitMoveNum)
const requestId = ref(null)
const offset = ref(0)
// 判断是否为垂直方向
const isVertical = computed(() => props.direction === Direction.DOWN || props.direction === Direction.UP)
// 计算列表样式
const listStyle = computed(() => ({
transform: `${isVertical.value ? 'translateY' : 'translateX'}(${offset.value}${props.isRem ? 'rem' : 'px'})`,
display: isVertical.value ? 'block' : 'flex'
}))
// 计算最大偏移量
const maxOffset = computed(() => {
return Math.ceil(props.data.length / props.columns) *
(isVertical.value ? props.itemHeight : props.itemWidth)
})
// 开始动画
const animate = () => {
if (props.data?.length < props.limitMoveNum) return
requestId.value = requestAnimationFrame(() => {
animate()
offset.value += (props.direction === Direction.UP || props.direction === Direction.LEFT) ? -0.3 : 0.3
// 当滚动完一轮后重置位置
if (Math.abs(offset.value) >= maxOffset.value) {
offset.value = 0
}
})
}
// 暂停动画
const pauseAnimation = () => {
if (requestId.value) {
cancelAnimationFrame(requestId.value)
requestId.value = null
}
}
watch(() => props.data, (val) => {
if (val?.length >= props.limitMoveNum) {
pauseAnimation()
animate()
}
}, {
immediate: true
})
onBeforeUnmount(() => {
pauseAnimation()
})
</script>
<style lang="scss" scoped>
.scroll-list {
width: 100%;
height: 100%;
/* 确保动画在合成层运行 */
backface-visibility: hidden;
&>* {
flex-grow: 0;
flex-shrink: 0;
}
}
</style>
**
方法二：基于animation动画
**
demo
<template>
<h-page-container class="hoem-page">
<h1>无缝滚动</h1>
<h2>垂直方向</h2>
<div class="container1">
<AutoScroll :data="list" :item-height="110" :limit-move-num="3">
<template #item="{ keySuffix }">
<div v-for="(item, index) in list" :key="`${item.id || index}${keySuffix || ''}`" class="card">
<div>{{ item.title }}</div>
<div>{{ item.content }}</div>
</div>
</template>
</AutoScroll>
</div>
<h2>水平方向</h2>
<div class="container2">
<AutoScroll :data="list" :direction="2" :item-width="210" :limit-move-num="3">
<template #item="{ keySuffix }">
<div v-for="(item, index) in list" :key="`${item.id || index}${keySuffix || ''}`" class="card">
<div>{{ item.title }}</div>
<div>{{ item.content }}</div>
</div>
</template>
</AutoScroll>
</div>
</h-page-container>
</template>
<script setup>
import { ref } from 'vue'
import AutoScroll from '@/components/AutoScroll.vue'
const list = ref([
{
id: 1,
title: '卡片1',
content: '111'
},
{
id: 2,
title: '卡片2',
content: '222'
},
{
id: 3,
title: '卡片3',
content: '333'
},
{
id: 4,
title: '卡片4',
content: '444'
}
])
</script>
<style lang="scss" scoped>
.hoem-page {
width: 100%;
height: 100vh;
padding: 10px;
}
.container1 {
width: 200px;
height: 300px;
margin: 20px;
overflow: hidden;
.card {
width: 100%;
height: 100px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 10px;
padding: 10px;
}
}
.container2 {
width: 500px;
height: 150px;
margin: 20px;
overflow: hidden;
.card {
width: 200px;
height: 100%;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-right: 10px;
padding: 10px;
}
}
</style>
AutoScroll.vue
<template>
<div class="auto-scroll" :class="scrollClass" @mouseenter="setScrollPause(true)" @mouseleave="setScrollPause(false)">
<div ref="scrollContent" class="scroll-content" :style="contentStyle">
<slot name="item" :key-suffix="''"></slot>
<template v-if="shouldDuplicate">
<slot name="item" :key-suffix="'_copy'"></slot>
</template>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
const props = defineProps({
// 列表
data: {
type: Array,
default: () => []
},
// 方向: 0 往下 1 往上 2 向左 3 向右
direction: {
type: Number,
default: 0
},
/**
* 一个列表元素的高度（包含外边距)
* direction为0 往下 1 往上时
*/
itemHeight: {
type: Number,
default: 40
},
/**
* 一个列表元素的宽度（包含外边距)
* direction为2 向左 3 向右时
*/
itemWidth: {
type: Number,
default: 100
},
// 开启无缝滚动的数据量。
limitMoveNum: {
type: Number,
default: 5
},
// 完整滚动周期(秒)
duration: {
type: Number,
default: 10
},
// 鼠标悬浮暂停
hoverPause: {
type: Boolean,
default: true
}
})
const scrollContent = ref(null)
const isPaused = ref(false)
// 判断是否为垂直方向
const isVertical = computed(() => props.direction <= 1)
// 是否需要复制内容
const shouldDuplicate = computed(() => props.data.length >= props.limitMoveNum)
// 滚动方向
const scrollClass = computed(() => [
`direction-${props.direction}`,
isVertical.value ? 'vertical' : 'horizontal'
])
// 内容样式计算
const contentStyle = computed(() => {
const sizeProp = isVertical.value ? 'height' : 'width'
const itemSize = isVertical.value ? props.itemHeight : props.itemWidth
const contentSize = props.data.length * itemSize
return {
[sizeProp]: shouldDuplicate.value ? `${contentSize * 2}px` : `${contentSize}px`,
'animation-duration': `${props.duration}s`,
'animation-play-state': isPaused.value ? 'paused' : 'running'
}
})
// 动画控制
const setScrollPause = (paused) => {
if (props.hoverPause) {
isPaused.value = paused
}
}
// 生命周期
onMounted(() => {
if (shouldDuplicate.value) {
setScrollPause(false)
}
})
onBeforeUnmount(() => {
setScrollPause(true)
})
</script>
<style scoped>
.auto-scroll {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.scroll-content {
position: absolute;
will-change: transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* 垂直方向样式 */
.vertical .scroll-content {
width: 100%;
}
/* 水平方向样式 */
.horizontal .scroll-content {
height: 100%;
display: flex;
}
/* 方向0: 往下 */
.direction-0 .scroll-content {
top: 0;
animation-name: scrollDown;
}
/* 方向1: 往上 */
.direction-1 .scroll-content {
bottom: 0;
animation-name: scrollUp;
}
/* 方向2: 向左 */
.direction-2 .scroll-content {
left: 0;
animation-name: scrollLeft;
}
/* 方向3: 向右 */
.direction-3 .scroll-content {
right: 0;
animation-name: scrollRight;
}
@keyframes scrollDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
@keyframes scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(50%);
}
}
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes scrollRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}
</style>
总结
到此这篇关于基于vue.js实现无缝滚动两种方法的文章就介绍到这了,更多相关vue.js无缝滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了手摸手教你实现Vue3 Reactivity，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了vue 父子组件共用mixins的注意点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue 中使用富文本编译器wangEditor3的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍Vue axios和vue-axios关系，感兴趣的朋友一起看看吧2022-08-08
本文主要介绍了Vue 编程式路由导航2022-04-04
使用el-row及el-col页面缩放时出现空行的问题及解决
这篇文章主要介绍了使用el-row及el-col页面缩放时出现空行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了使用Vue实现Context-Menu的思考与总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
el-popover是一个基于element-ui框架设计的,用于浮动展示提示或菜单的UI组件,下面这篇文章主要给大家介绍了关于vue.js修改el-popover组件显示位置的相关资料,需要的朋友可以参考下2023-06-06
本文主要介绍了vue3使用reactive赋值后页面不改变，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型2022-12-12
最新评论