二维数组转换+页面渲染

二维数组转换+页面渲染

---

HTML参考结构如下

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

   

           

               

                   

               

           

        

---

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 += "

" +

                    " " + item.x+ "" +

                 

";

            }

            // 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, }//每页轮播停留时间 以毫秒计

        })