二維數組轉換+頁面渲染
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" >
? ? ? ? ? ? <div class="swiper-container">
? ? ? ? ? ? ? ? <div class="swiper-wrapper" id="swiper_list">
? ? ? ? ? ? ? ? ? ? <!---動態(tài)添加內容-->
? ? ? ? ? ? ? ? </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)); //創(chuàng)建一個新二維數組，二維數組內的子數組個數（長度）=原數組長度/子數組需求存儲量
? ? ? ? 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")? //創(chuàng)建一個新的div
? ? ? ? ? ? div.className = 'swiper-slide'; //將新的div定義為swiper輪播塊
? ? ? ? ? ? for (var item of newArr[i]) {? //循環(huán)渲染輪播頁面
? ? ? ? ? ? ? ? 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, }//每頁輪播停留時間 以毫秒計
? ? ? ? })
