二维数组转换+页面渲染

HTML参考结构如下

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">

            <div class="swiper-container">

                <div class="swiper-wrapper" id="swiper_list">

                    <!---动态添加内容-->

                </div>

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

        })