标签：function 数组 tData chunk 嵌套 slide 循环 result str

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

以使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。