本文介绍如何使用JavaScript定时器配合数组slice方法，实现数组内容的循环滚动展示。通过截取原数组片段生成新数组并循环输出，适用于列表轮播等场景。
本文分享了利用JavaScript定时器循环展示数组的具体实现代码，供读者参考。
首先查看运行效果演示。
核心流程解析。
利用数组的slice()方法，结合条件判断截取原数组的指定部分，从而组合生成新的数组。
对生成的新数组进行循环遍历处理。
let currentPage = 0
// arr:原数组 newLen:新数组需要的长度 currentPage:现在的页码
// 方法一：
function loopData(arr, newLen) {
let len = arr.length;
let result = len - currentPage;
let newArr = [];
if (result > 0 && result < newLen) {
newArr = [
...arr.slice(currentPage - result, len),
...arr.slice(0, newLen - result),
];
currentPage = newLen - result;
} else if (result >= newLen) {
newArr = arr.slice(currentPage, currentPage + newLen);
currentPage += newLen;
} else {
currentPage = 0;
newArr = arr.slice(currentPage, currentPage + newLen);
}
return newArr;
}
// 方法二：
function loopData(arr, newLen) {
let len = arr.length;
let newArr = [];
if (currentPage === len) { // 页码等于数组长度时，从0重新开始
currentPage = 0;
}
if (currentPage + newLen <= len) {
newArr = [...arr.slice(currentPage, currentPage + newLen)];
currentPage++;
} else if (currentPage + newLen > len && currentPage < len) {
newArr = [
...arr.slice(currentPage, len),
...arr.slice(0, newLen - len + currentPage),
];
currentPage++;
}
return newArr;
}基础功能演示案例。
<template>
<div class="container">
<el-button @click="changeStatus">{{ flag ? "暂停" : "开始" }}</el-button>
{{ list }}
</div>
</template>
<script>
let currentPage = 0;
export default {
data() {
return {
arr: [1, 2, 3, 4, 5, 6, 7],
list: [],
timer: null,
flag: true,
};
},
mounted() {
this.start()
},
destroyed() {
this.timer && clearInterval(this.timer);
},
methods: {
changeStatus() {
if (this.flag) {
this.timer && clearInterval(this.timer);
} else {
this.start();
}
this.flag = !this.flag;
},
start() {
this.timer = setInterval(() => {
this.list = this.loopData(this.arr, 4);
}, 1000);
},
loopData(arr, newLen) {
let len = arr.length;
let newArr = [];
if (currentPage === len) {
currentPage = 0;
}
if (currentPage + newLen <= len) {
newArr = [...arr.slice(currentPage, currentPage + newLen)];
currentPage++;
} else if (currentPage + newLen > len && currentPage < len) {
newArr = [
...arr.slice(currentPage, len),
...arr.slice(0, newLen - len + currentPage),
];
currentPage++;
}
return newArr;
},
},
};
</script>
<style lang="scss" scoped>
.container {
padding: 20px;
}
</style>以上内容即为本文的全部讲解，希望能为读者的学习带来帮助，同时也欢迎大家继续支持本站。