数组循环的嵌套操作

需要实现的效果图如下所示：

以使用swiper为例进行分析：

根据返回的数据动态渲染slide,每个slide中包含三条数据。重点内容为返回数据的分组，我们将数据出路为三条一组。

1.数据处理

一维数组转为二维数组

function transDataFun(tData) {
            var result = [];
            var chunk = 3;
            for (let i = 0; i < tData.length; i += chunk) {
                result.push(tData.slice(i, i + chunk)); // 每3项分成一组
            }
            return result;
        }

2.slide的动态渲染 

str += ` <div class="swiper-slide">
                ${renderList(n)}
         </div> `

                

$(".mySwiper .swiper-wrapper").append(str); 

3.slide内数据的循环

循环传入的数据进行数据的填充

function renderList(list) {
            let str = "";
            list.map(function (n) {
                str += `<div class="item">
                    <a href="{php echo mobileUrl('goods/detail')}&id=${n.id}">
                        <div class="item-image">
                            <img src="${n.thumb}" alt="">
                        </div>
                        <div class="item-intro">
                            <div class="intro-top">
                                <p class="intro-title">${n.title}</p>
                                <p class="intro-type">${n.keywords} </p>
                            </div>
                            <div class="intro-bottom">
                                <p>
                                    <span class="price">￥${n.marketprice}/人</span>
                                    <button class="pre-order" onclick="checkLogin(${n.id},event)">预定</button>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>`;
            });
            return str;
        }

　　

 

标签：function,数组,tData,chunk,嵌套,slide,循环,result,str
来源： https://www.cnblogs.com/cuipingzhao/p/16426063.html