js定时器循环展示数组
凡小多 人气:0先看看效果图
流程
使用数组的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>
加载全部内容