二维数组转换+页面渲染

HTML参考结构如下

由于模拟用到swiper 这里引入swiper的js和css

</div>

js参考代码如下

var arr =[{1},{2},{3},{4},{5},{6},{7},{8},{9},{10},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]

一个数组里面有N条数据

var num=//每个子数组存储数据条数可根据需求调整num

var newArr = new Array(Math.ceil(arr.length / num)); //创建一个新二维数组，二维数组内的子数组个数（长度）=原数组长度/子数组需求存储量

for (var i = 0; i < newArr.length; i++) {//二维数组框架生成结构类似[[],[],[],[]]，此时无内容

newArr[i] = new Array();

}

for (var j = 0; j < arr.length; j++) {//将原数组拆分并将拆分出的内容添加到二维数组中

newArr[parseInt(j / num)][j % num] = arr[j];

}

console.log(newArr)//此时结构类似于

for (var i = 0; i < newArr.length; i++) {//以swiper轮播参考需要生成N页轮播块

let div = document.createElement("div") //创建一个新的div

div.className = 'swiper-slide'; //将新的div定义为swiper轮播块

for (var item of newArr[i]) { //循环渲染轮播页面

div.innerHTML += "<div id='swiper_show'>" +

"<span> " + item.x+ "</span>" +

</div>";

}

// console.log(div)

swiper_list.appendChild(div)//将生成的轮播块添加到组件中

}

let swiper = new Swiper(".swiper-container", {//轮播设置参考详细设置可翻阅swiper官方API

autoplay: true,

direction: "vertical",

loop: true,

speed: 500,//轮播速度

autoplay: { delay: 5000, }//每页轮播停留时间以毫秒计

})

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。