用 gulp require.js 和 jQuery 写一个小米项目之-----滚动商品和下面商品加载的实现

滚动商品slide.js

//滚动商品的函数
define(["jquery"],function($){
    function download(){
        $.ajax({
            url:"../data/slide.json",
            success:function(res){
                //获取数据
                var slideArr = res.data.list.list;
                for(var i=0;i<slideArr.length;i++){   
                    //把数据加载进去             
                    $(`<li class = 'swiper-slide rainbow-item-3' style = 'width: 234px; margin-right: 14px;'>
                    <a href="#" target = "_blank">
                        <div class = 'content'>
                            <div class = 'thumb'>
                                <img width="160" height="160" src="${slideArr[i].img}" alt=""/>
                            </div>
                            <h3 class = 'title'>${slideArr[i].goods_name}</h3>
                            <p class = 'desc'>${slideArr[i].desc}</p>
                            <p class = 'price'>
                                <span>${slideArr[i].seckill_Price}</span>元
                                <del>${slideArr[i].goods_price}</del>
                            </p>
                        </div>
                    </a>
                </li>`).appendTo("#J_flashSaleList  .swiper-wrapper");
                }
            },
            error:function(msg){
                console.log(msg);
            }
        })
    }
    function slide(){
        //找到前后箭头的控件
        var aSpans = $(".swiper-controls").find("span");
        //4张图片的距离是992px
        //组数一开始为0
        var zu = 0;
        //一共7组
        var lastzu =Math.ceil(25/4) -1;
        var timer = null;
        //定时器
         timer = setInterval(function(){
            if(zu <= lastzu -1 ){
                zu++;
                tab();   
            }    
        },4000)
        //滚动函数
        function tab(){
            //如果是0组 吧左箭头变为禁用否则不禁用
           zu == 0 ? aSpans.eq(0).addClass("swiper-button-disabled") : aSpans.eq(0).removeClass("swiper-button-disabled");

           //如果是最后一组 吧右箭头变为禁用否则不禁用
            zu == lastzu ? aSpans.eq(1).addClass("swiper-button-disabled") : aSpans.eq(1).removeClass("swiper-button-disabled")
            
            //如果是最后一组 距离变为一半 否则就移动4个图片的距离
            var iTarget = zu == lastzu ? zu * -992 + 496 : zu * -992;

            $("#J_flashSaleList ul").css({
                transform: `translate3d(${iTarget}px, 0px, 0px)`,
                transitionDuration: "1000ms"
            })
        }
        aSpans.click(function(){
            //如果是左箭头 让组数减一 在调用移动  就是向左移动4个图片 
            //如果是右箭头 让组数加一 在调用移动  就是向右移动4个图片
            clearInterval(timer);
            if($(this).index() == 0){
                zu--;
                if(zu <=0){
                    zu=0;
                }
                timer = setInterval(function(){
                    if(zu <= lastzu -1 ){
                        zu++;
                        tab();   
                    }    
                },4000)
            }else{
                zu++;
                if(zu >=lastzu){
                    zu=lastzu;
                }
                timer = setInterval(function(){
                    if(zu <= lastzu -1 ){
                        zu++;
                        tab();   
                    }    
                },4000)
            }
            tab();
        })
    }
    
    return{
        download:download,
        slide:slide
    }
})

slide.json数据

{"code":200,"msg":"success","data":{"list":{"time_id":"1568080800","start_time":1568080800,"end_time":1568094120,"list":[{"goods_id":"2190900011","product_id":"9432","goods_name":"高品质多功能头戴耳机\t","desc":"我的私人KTV","seckill_type":"seckill","goods_price":"249","seckill_Price":"199","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a60f4d10dbcb83f0b0e357309baa36b.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a60f4d10dbcb83f0b0e357309baa36b.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1551343984.14546114.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2190900011\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2193000002","product_id":"10342","goods_name":"最生活毛巾·Air（10条装） 素蓝","desc":"给生活一条好毛巾","seckill_type":"seckill","goods_price":"169","seckill_Price":"99","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/14d7d6ae6df7c616178ef077db8c814e.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/14d7d6ae6df7c616178ef077db8c814e.jpg","pc_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c4bdbabe1a232469eea43c1824990d3.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2193000002\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2181400001","product_id":"6334","goods_name":"小米AI音箱","desc":"听音乐、语音遥控家电","seckill_type":"seckill","goods_price":"299","seckill_Price":"229","discount_img":"https://i8.mifile.cn/b2c-mimall-media/1e5e065d515ba0a0303d96740ea58494.jpg","img":"https://i8.mifile.cn/b2c-mimall-media/1e5e065d515ba0a0303d96740ea58494.jpg","pc_img":"https://i8.mifile.cn/b2c-mimall-media/e277547c6e3329303dd2c20a327424c4.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2181400001\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2192300005","product_id":"9959","goods_name":"Redmi全自动波轮洗衣机1S 8kg 灰色","desc":"小身材大容量，可预约","seckill_type":"seckill","goods_price":"899","seckill_Price":"699","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3c53a053357c0fb086a1eb7d43908b70.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3c53a053357c0fb086a1eb7d43908b70.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1560062441.20748673.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2192300005\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2183700045","product_id":"8828","goods_name":"贝医生声波电动牙刷 白色","desc":"声波净齿，软毛护龈","seckill_type":"seckill","goods_price":"99","seckill_Price":"89","discount_img":"https://i8.mifile.cn/b2c-mimall-media/54e5ce47cff6ae5ffa6a34abc4b90438.jpg","img":"https://i8.mifile.cn/b2c-mimall-media/54e5ce47cff6ae5ffa6a34abc4b90438.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1536913761.18763266.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2183700045\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2185100019","product_id":"9161","goods_name":"米家互联网洗烘一体机10Kg 白色","desc":"智能烘干，高效净衣","seckill_type":"seckill","goods_price":"2299","seckill_Price":"1899","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0b4ba11f82f7c911035cec61f4fac511.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0b4ba11f82f7c911035cec61f4fac511.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1545975724.92496169.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2185100019\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2191400015","product_id":"9614","goods_name":"小米净水器600G 白色","desc":"600加仑通量，流速更快","seckill_type":"seckill","goods_price":"2499","seckill_Price":"1999","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/efae8106bc194e6a730294c9ee531caf.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/efae8106bc194e6a730294c9ee531caf.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1555486031.585971.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2191400015\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"1185000014","product_id":"9144","goods_name":"米家互联网空调（一级能效）","desc":"1.5匹，全直流变频","seckill_type":"seckill","goods_price":"2699","seckill_Price":"2299","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/425e29b004536f6de55c87d678977413.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/425e29b004536f6de55c87d678977413.jpg","pc_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/819f7dcde77a8626052e05b8cb6678e6.jpeg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=1185000014\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2182100017","product_id":"8134","goods_name":"小米手环3 黑色 ","desc":"全新OLED可触摸大屏","seckill_type":"seckill","goods_price":"139","seckill_Price":"129","discount_img":"https://i8.mifile.cn/b2c-mimall-media/05d59f494c122b81d737a22e9125b89a.jpg","img":"https://i8.mifile.cn/b2c-mimall-media/05d59f494c122b81d737a22e9125b89a.jpg","pc_img":"https://i8.mifile.cn/b2c-mimall-media/c39f5c2832730ab4ca00909c9405712b.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2182100017\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2192300055","product_id":"10015","goods_name":"小米小爱音箱 Play（白色）量产版 白色","desc":"听音乐、语音遥控家电","seckill_type":"seckill","goods_price":"169","seckill_Price":"99","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/75cfba1ec641388eabc3ae5464ff1d27.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/75cfba1ec641388eabc3ae5464ff1d27.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1560230039.28979252.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2192300055\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2192200004","product_id":"9464","goods_name":"小米路由器4A 纯白色","desc":"更高性价比的双频路由器","seckill_type":"seckill","goods_price":"119","seckill_Price":"99","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bfc00da5e260ac1d1653bf4b50697f43.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bfc00da5e260ac1d1653bf4b50697f43.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1558927605.77414956.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2192200004\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"1193500041","product_id":"10672","goods_name":"米家互联网空调C1（1.5匹/定频/三级能效）","desc":"1.5匹，静音，快速制冷热","seckill_type":"seckill","goods_price":"1899","seckill_Price":"1799","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7ce5f2f925265f89e2076fd2d162ed3.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7ce5f2f925265f89e2076fd2d162ed3.jpg","pc_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6125ee4544588c2a3cc74d85fa27fbba.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=1193500041\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2191700036","product_id":"9723","goods_name":"米家驱蚊器基础版 3个装 白色","desc":"3个装 长效驱蚊","seckill_type":"seckill","goods_price":"129","seckill_Price":"99","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7927ec3ddee8ff6b3ba26fc4fc8ffe07.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7927ec3ddee8ff6b3ba26fc4fc8ffe07.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1557804685.13891176.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2191700036\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2184300026","product_id":"9017","goods_name":"米家新风机 白色","desc":"全效解决全屋空气问题","seckill_type":"seckill","goods_price":"2699","seckill_Price":"2399","discount_img":"https://i8.mifile.cn/b2c-mimall-media/9a1f6e185c9ae49ca06dbbd2569e8266.jpg","img":"https://i8.mifile.cn/b2c-mimall-media/9a1f6e185c9ae49ca06dbbd2569e8266.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1541418170.92952541.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2184300026\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2184800014","product_id":"9120","goods_name":"米家智能门锁 标准锁体 碳素黑","desc":"一体化活体指纹识别，多种开锁方式","seckill_type":"seckill","goods_price":"1299","seckill_Price":"1199","discount_img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e9914e01e49c18e56c8017408656a729.jpg","img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e9914e01e49c18e56c8017408656a729.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1543908491.84129654.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2184800014\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2184100008","product_id":"8916","goods_name":"小米笔记本电脑 15.6\" i3 4G 128G 深空灰","desc":"全面均衡的国民轻薄本","seckill_type":"seckill","goods_price":"3399","seckill_Price":"2799","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/426977e89fdb78103a9cff97f9a3a028.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/426977e89fdb78103a9cff97f9a3a028.jpg","pc_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cd2aa2dcad6440b469c22e27db9b6236.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2184100008\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2192300015","product_id":"9990","goods_name":"米家电饭煲4L 白色","desc":"890W 立体加热 ","seckill_type":"seckill","goods_price":"299","seckill_Price":"269","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/98eecc4961d48dd1db8d6563784fc719.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/98eecc4961d48dd1db8d6563784fc719.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1559728396.2634058.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2192300015\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2174400013","product_id":"7229","goods_name":"米家空气净化器 2S","desc":"好空气看得见","seckill_type":"seckill","goods_price":"899","seckill_Price":"699","discount_img":"https://i8.mifile.cn/b2c-mimall-media/db68b179e4287c321eb2c3685c615088.jpg","img":"https://i8.mifile.cn/b2c-mimall-media/db68b179e4287c321eb2c3685c615088.jpg","pc_img":"https://i8.mifile.cn/v1/a1/d5a39c5e-28e7-f4c1-57fd-59933f26032b.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2174400013\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2184600010","product_id":"9098","goods_name":"小米笔记本电脑 15.6\" i3 4G 256G 集显 白色","desc":"全面均衡的国民轻薄本","seckill_type":"seckill","goods_price":"3699","seckill_Price":"2999","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c08db94e1da7f30fd6d050cb603bdcf1.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c08db94e1da7f30fd6d050cb603bdcf1.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1553928054.21241826.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2184600010\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2184700003","product_id":"9104","goods_name":"米家水离子吹风机 白色","desc":"快速吹干，深度补水","seckill_type":"seckill","goods_price":"199","seckill_Price":"179","discount_img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e5d6b9f9bf5fdfb421b771892c3bad07.jpg","img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e5d6b9f9bf5fdfb421b771892c3bad07.jpg","pc_img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b4bb8afc2ffbbdea5696fa91ac184b84.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2184700003\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2191700022","product_id":"9712","goods_name":"小米游戏本15.6\"  8代i7 GTX1060 16G 512G SSD 灰色","desc":"性能怪兽 信仰级游戏体验","seckill_type":"seckill","goods_price":"8999","seckill_Price":"7499","discount_img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b22c4cc61e9bd3841e5f1e999fb9b126.jpg","img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b22c4cc61e9bd3841e5f1e999fb9b126.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1557312623.98719913.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2191700022\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2185000006","product_id":"9140","goods_name":"小米移动电源3 10000mAh USB-C双向快充版 银色","desc":"双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心","seckill_type":"seckill","goods_price":"129","seckill_Price":"99","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5abdef0a4506d2c3bfa8a91118d555c8.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5abdef0a4506d2c3bfa8a91118d555c8.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1552372948.24196473.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2185000006\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2181100016","product_id":"7797","goods_name":"米家电动剃须刀 黑色","desc":"剃得干净，剃得快","seckill_type":"seckill","goods_price":"199","seckill_Price":"179","discount_img":"https://i8.mifile.cn/b2c-mimall-media/b38a95198475d2c8be1e11cab147fc22.jpg","img":"https://i8.mifile.cn/b2c-mimall-media/b38a95198475d2c8be1e11cab147fc22.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1522204891.45957856.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2181100016\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2192900005","product_id":"10304","goods_name":"小米米家智能门锁 磨砂金 霸王锁体 磨砂金","desc":"适配霸王锁体，多种开锁方式","seckill_type":"seckill","goods_price":"1799","seckill_Price":"1599","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/20228f33450904674475086b5dc35f3c.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/20228f33450904674475086b5dc35f3c.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1565944082.21497591.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2192900005\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2164000002","product_id":"4664","goods_name":"净化器滤芯 通用版","desc":"3层高效净化悬浮物","seckill_type":"seckill","goods_price":"149","seckill_Price":"129","discount_img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c1f9eecd1d0b411315f2e698e953a52d.jpg","img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c1f9eecd1d0b411315f2e698e953a52d.jpg","pc_img":"https://i8.mifile.cn/v1/a1/0a872a83-a929-7e0d-1892-cf28b0d75077.jpg","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2164000002\u0026start_time=1568080800\u0026end_time=1568094120"}},{"goods_id":"2184400004","product_id":"9029","goods_name":"米兔折叠婴儿推车 蓝色","desc":"出发去向往的地方","seckill_type":"seckill","goods_price":"699","seckill_Price":"649","discount_img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b5a6a8f6e5715044e447542e58fc5582.jpg","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b5a6a8f6e5715044e447542e58fc5582.jpg","pc_img":"https://i8.mifile.cn/a1/pms_1541382633.6797803.png","label_text":"","is_test":"0","action":{"log_code":"31activity_homeseckill#goodsid=2184400004\u0026start_time=1568080800\u0026end_time=1568094120"}}]}}}

下面商品数据data.js

//主页面下面的商品数据
define(["jquery"],function($){
    function data(){
        $.ajax({
            url:"../data/data.json",
                success:function(res){
                    //设置第一个数据
                    var dataArr = res[0];
                    var node = $(` <div class = 'home-banner-box'>
                        <a href="#">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a2f39c9fe0804ace1d3707574c7c86f.jpg?thumb=1&w=1226&h=120&f=webp&q=90" alt=""/>
                        </a>
                    </div>
                    <div class = "home-brick-box home-brick-row-2-box xm-plain-box">
                        <div class = 'box-hd'>
                            <h2 class = 'title'>${dataArr.title}</h2>
                            <div class = "more">
                                <a href="#" class = 'more-link'>
                                    查看全部
                                    <i class = 'iconfont iconfont-arrow-right-big'></i>
                                </a>
                            </div>
                        </div>
                        <div class = 'hox-bd clearfix'>
                            <div class = 'row'>
                                <div class = 'span4'>
                                    <ul class = 'brick-promo-list clearfix'>
                                        <li class = 'brick-item brick-item-l'>
                                            <a href="#">
                                                <img src="${dataArr.img}" alt=""/>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class = 'span16'>
                                <ul class = 'brick-list clearfix'>
                                </ul>
                                </div>
                            </div>
                        </div>
                    </div>`).appendTo(".page-main .container");
                //请求子元素数据
                var childsArr = dataArr.childs;
                for(var i =0;i<childsArr.length;i++){
                    $(`
                    <li class = 'brick-item brick-item-m brick-item-m-2'>
                                <a href="#">
                                    <div class = 'figure figure-img'>
                                        <img width="160" height="160" src="${childsArr[i].img}" alt=""/>
                                    </div>
                                    <h3 class = 'title'>
                                        ${childsArr[i].title}
                                    </h3>
                                    <p class = 'desc'>${childsArr[i].desc}</p>
                                    <p class = 'price'>
                                        <span class = 'num'>${childsArr[i].price}</span>
                                        元
                                        <span>起</span>
                                        <!--如果没有打折的话就不显示打折后价格-->
                                        ${childsArr[i].del == 0 ? "" : "<del>" + childsArr[i].del + "元<del>"}
                                    </p>
                                </a>
                            </li>
                `).appendTo(node.find(".hox-bd .row .span16 ul"));
                }
                //后面几个模块是类似的设置一个即可
                for(var j=1;j<res.length;j++){
                    //从1开始 0上面有了
                    var datasNode = $(`<div class = 'home-banner-box'>
                    <a href="#">
                        <img src="${res[j].topImg}" alt=""/>
                    </a>
                </div>
                <div class = 'home-brick-box home-brick-row-2-box xm-plain-box'>
                    <div class = 'box-hd clearfix'>
                        <h2 class = 'title'>${res[j].title}</h2>
                        <div class = 'more'>
                            <ul class = 'tab-list'>
                                <li class = 'tab-active'>
                                    热门
                                </li>
                                <li>
                                ${res[j].subTitle}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class = 'box-bd'>
                        <div class = 'row'>
                            <div class = 'span4'>
                                <ul class = 'brick-promo-list clearfix'>
                                    <li class = 'brick-item  brick-item-m'>
                                        <a href="#">
                                            <img src="${res[j].leftChilds[0]}" alt=""/>
                                        </a>
                                    </li>
                                    <li class = 'brick-item  brick-item-m'>
                                        <a href="#">
                                            <img src="${res[j].leftChilds[1]}" alt=""/>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class = 'span16'>
                                <ul class = "brick-list clearfix">  
                                    
                                </ul>
                                <ul class = "brick-list clearfix hide">  
                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>`).appendTo(".page-main .container");
                    var hotchildsArr = res[j].hotChilds;
                    for(var k=0;k<hotchildsArr.length;k++){
                        //把这些数据加载到热门框内
                        $(`<div>
                        <li class = 'brick-item ${k==7?"brick-item-s" :"brick-item-m"} brick-item-m-2'>
                            <a href="#">
                                <div class = 'figure figure-img'>
                                    <img width="160" height="160" src="${hotchildsArr[k].img}" alt=""/>
                                </div>
                                <h3 class = 'title'>${hotchildsArr[k].title}</h3>
                                <p class = 'desc'>${hotchildsArr[k].desc}</p>
                                <p class = 'price'>
                                    <span class = 'num'>${hotchildsArr[k].price}</span>元
                                <!--如果没有打折就不显示-->
                                    ${hotchildsArr[k].del == 0? "" : " <del><span class = 'num'>"+hotchildsArr[k].del+"</span>元 </del>"}                                                         
                                </p>
                            </a>
                        </li>
                    </div>
                    `).appendTo(datasNode.find(".span16 .brick-list").eq(0));
                    }
                    $(`<li class = 'brick-item brick-item-s'>
                    <a href="#">
                        <div class = 'figure figure-more'>
                            <i class = 'iconfont iconfont-circle-arrow-right'></i>
                        </div>
                        <div class = 'more'>
                            浏览更多
                            <small>热门</small>
                        </div>
                    </a>
                </li>`).appendTo(datasNode.find(".span16 .brick-list").eq(0));
                //把数据加载到第二个框内
                var childsArr = res[j].childs;
                    for(var l=0;l<childsArr.length;l++){
                        //把这些数据加载到热门框内
                        $(`<div>
                        <li class = 'brick-item ${l==7?"brick-item-s" :"brick-item-m"} brick-item-m-2'>
                            <a href="#">
                                <div class = 'figure figure-img'>
                                    <img width="160" height="160" src="${childsArr[l].img}" alt=""/>
                                </div>
                                <h3 class = 'title'>${childsArr[l].title}</h3>
                                <p class = 'desc'>${childsArr[l].desc}</p>
                                <p class = 'price'>
                                    <span class = 'num'>${childsArr[l].price}</span>元
                                <!--如果没有打折就不显示-->
                                    ${childsArr[l].del == 0? "" : " <del><span class = 'num'>"+childsArr[l].del+"</span>元 </del>"}                                                         
                                </p>
                            </a>
                        </li>
                    </div>
                    `).appendTo(datasNode.find(".span16 .brick-list").eq(1));
                    }
                    $(`<li class = 'brick-item brick-item-s'>
                    <a href="#">
                        <div class = 'figure figure-more'>
                            <i class = 'iconfont iconfont-circle-arrow-right'></i>
                        </div>
                        <div class = 'more'>
                            浏览更多
                            <small>热门</small>
                        </div>
                    </a>
                </li>`).appendTo(datasNode.find(".span16 .brick-list").eq(1));
                }
            },
            error:function(msg){
                console.log(msg);
            }
        })
    }
    //事件委托切换热门和其他数据
    function qiehuan(){
        $(".page-main .container").on("mouseenter", ".more .tab-list li", function(){
            $(this).addClass("tab-active").siblings("li").removeClass("tab-active");

            //同时切换显示的商品内容
            $(this).closest(".home-brick-box").find(".box-bd .span16  ul").addClass("hide").eq($(this).index()).removeClass("hide");
        })
    }
    return{
        data:data,
        qiehuan:qiehuan
    }
})

data.json数据

[{"title":"手机","img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/79ed6663b57e30554a5d1f0653c68b78.jpg?thumb=1&w=234&h=614&f=webp&q=90","childs":[{"id":0,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6f2493e6c6fe8e2485c407e5d75e3651.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi Note 8 Pro","desc":"6400万全场景四摄","price":1399,"del":0},{"id":1,"img":"http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4c87947d104ee5833913e4c520108f16.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi Note 8","desc":"千元4800万四摄","price":999,"del":0},{"id":2,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beee478168e5c4fd0d66369386fddbbe.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi K20 Pro 6GB+128GB","desc":"骁龙855， 弹出全面屏","price":2299,"del":2599},{"id":3,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ce61b71e2f81df62bd0c05aaa901d22.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi Note 7","desc":"4800万拍照千元机","price":1099,"del":1399},{"id":4,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9aab8a7fa9005ef918c9aa2d5f17c806.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi 7","desc":"4000mAh超长续航","price":699,"del":799},{"id":5,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/411d540271f6efbdd882fa33daee0de3.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米MIX 3 8GB+128GB","desc":"DxO百分拍照手机","price":2599,"del":3599},{"id":6,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bd25cc614a670f4d5546fe82e239ef86.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米CC9","desc":"3200万自拍，4800万三摄","price":1799,"del":0},{"id":7,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/134efaa5dec3267ce29e36bad3ec26c9.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米9 SE","desc":"索尼4800万三摄，骁龙712","price":1599,"del":1999}]},{"topImg":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e64bcac4e4b7c2ceb94f277bbc57ad45.jpg?thumb=1&w=1226&h=120&f=webp&q=90","title":"家电","subTitle":"电视影音","leftChilds":["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/90b83a26c2e64a1a0a430961eee0ee90.jpg?thumb=1&w=234&h=300&f=webp&q=90","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b67de5a8ce9025fb5d8bac66e019d1c3.jpg?thumb=1&w=234&h=300&f=webp&q=90"],"hotChilds":[{"id":8,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8ce424d6fe93dfb74733b5838140b7ee.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"米家互联网空调C1（一级能效）","desc":"变频节能省电，自清洁","price":2599,"del":2799},{"id":9,"img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2b911be4c2f156bb6e4cf367c6080045.jpg?thumb=1&w=200&h=200","title":"米家空调","desc":"出众静音，快速制冷热","price":1699,"del":1799},{"id":10,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec20453216dcd42f982cffe5fdbc3115.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"米家互联网洗烘一体机 Pro 10kg","desc":"智能洗烘，省心省力","price":2999,"del":0},{"id":11,"img":"https://i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg","title":"小米电视4A 32英寸","desc":"人工智能系统，高清液晶屏","price":799,"del":0},{"id":12,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b8c63a2024528fe5410ebe669b7d2407.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi全自动波轮洗衣机1A 8kg","desc":"一键操作，父母都爱用","price":799,"del":0},{"id":13,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米全面屏电视E55A","desc":"全面屏设计，人工智能语音","price":2099,"del":0},{"id":14,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cd2aa2dcad6440b469c22e27db9b6236.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"15.6\" 四核i7 16G 独显 512G","desc":"全面均衡的国民轻薄本","price":4899,"del":0},{"id":15,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg?thumb=1&w=100&h=100&f=webp&q=90","title":"Air 13.3\" 2019款","desc":"","price":4699,"del":0}],"childs":[{"id":16,"img":"https://i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg","title":"小米电视4A 32英寸","desc":"人工智能系统，高清液晶屏","price":799,"del":0},{"id":17,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米全面屏电视E55A","desc":"全面屏设计，人工智能语音","price":2099,"del":0},{"id":18,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3317a291b112aa4712059ad93263668.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米全面屏电视E65A","desc":"全面屏设计，人工智能语音","price":3199,"del":3999},{"id":19,"img":"https://i8.mifile.cn/b2c-mimall-media/ede227c1f0e3472fb8dcfae980d1e43f!200x200.jpg","title":"小米电视4X 43英寸","desc":"FHD全高清屏，人工智能语音","price":1399,"del":1499},{"id":20,"img":"https://i8.mifile.cn/v1/a1/cef8a9c0-2386-5b66-9ed2-6b1d4e4490bf!200x200.jpg","title":"小米电视4C 55英寸","desc":"4K HDR，人工智能系统","price":1999,"del":0},{"id":21,"img":"https://i8.mifile.cn/b2c-mimall-media/91b59cc6474e0cd777445b15adb13980!200x200.jpg","title":"小米电视4A 65英寸","desc":"4K HDR，人工智能语音系统","price":2999,"del":0},{"id":22,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米壁画电视 65英寸","desc":"壁画外观，全面屏，远场语音","price":6999,"del":0},{"id":23,"img":"https://i8.mifile.cn/b2c-mimall-media/aa8a6ce3b2b1201d74d0197482f3403b!100x100.jpg","title":"小米盒子4","desc":"","price":299,"del":0}]},{"topImg":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7606bb66991f59e15b5b35e917b1a907.jpg?thumb=1&w=1226&h=120&f=webp&q=90","title":"智能","subTitle":"出行","leftChilds":["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c23f5b9a927b2dc49c25277e07727c.jpg?thumb=1&w=234&h=300&f=webp&q=90","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?thumb=1&w=234&h=300&f=webp&q=90"],"hotChilds":[{"id":24,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/011dd8493ad62f3793dbb63d9fbd3bc0.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米「小爱老师」","desc":"口袋里的英语外教","price":459,"del":499},{"id":25,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0baacf6e54cbf89cab2c543cc02344e9.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米米家智能门锁 推拉式","desc":"一步推拉，高端智能门锁","price":1599,"del":1699},{"id":26,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7c6e79433c883e1a022ec21402c1679.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":" 小米小爱音箱 Play","desc":"听音乐、语音遥控家电","price":99,"del":169},{"id":27,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44a30f0da2aacb66a0f896293ebc703f.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小爱音箱万能遥控版","desc":"传统家电秒变智能","price":149,"del":199},{"id":28,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b42e49c6c0208f2de5a2f7a491a3af46.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"米家电饭煲4L","desc":"890W 立体加热 ","price":289,"del":299},{"id":29,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e850fa029579ba886e3d5c81f00ae534.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米手环4","desc":"大屏彩显，20天超长续航","price":169,"del":0},{"id":30,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0c65d472682f0679e192dc7b4cd6e64c.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"米家九号平衡轮","desc":"能花式酷玩的“风火轮”","price":999,"del":0},{"id":31,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/550177d2e54387521bce9e78cb2949dd.jpg?thumb=1&w=100&h=100&f=webp&q=90","title":"小米体脂秤2","desc":"","price":99,"del":0}],"childs":[{"id":32,"img":"https://i8.mifile.cn/v1/a1/768992ca-4136-92f1-244a-0194a81a6360!200x200.jpg","title":"小米米家电动滑板车","desc":"便携折叠，自由穿行","price":1999,"del":0},{"id":33,"img":"https://i8.mifile.cn/b2c-mimall-media/18a82e7cda6ecbc22ecee7ac927d6ff9!200x200.jpg","title":"米兔折叠婴儿推车","desc":"出发去向往的地方","price":649,"del":699},{"id":34,"img":"https://i8.mifile.cn/b2c-mimall-media/553b5c01820c844565abe64e50bba323!200x200.jpg","title":"米兔遥控小飞机","desc":"迷你酷玩具，溜到飞起","price":389,"del":399},{"id":35,"img":"https://i8.mifile.cn/v1/a1/cdc5c77b-d7e9-5a42-f848-3ff1808a139a!200x200.jpg","title":"米家车载空气净化器","desc":"高效净化车内空气","price":449,"del":0},{"id":36,"img":"https://i8.mifile.cn/v1/a1/aaa1593d-9ca7-2944-3b62-380cc3427d82!200x200.jpg","title":"AMAZFIT 运动手表","desc":"扔掉手机去跑步","price":679,"del":799},{"id":37,"img":"https://i8.mifile.cn/v1/a1/877d3ce8-68ab-7506-2a78-55a8c0fba946!200x200.png","title":"九号平衡车 Plus","desc":"一个形影不离的新伙伴","price":3499,"del":0},{"id":38,"img":"https://i8.mifile.cn/b2c-mimall-media/61472c3fcd181959055551e5c73aafec!200x200.jpg","title":"米家车载逆变器","desc":"双USB充电口，国际组合插孔","price":199,"del":0},{"id":39,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0294e2f3997bf0cffb7bf48361d03588.jpg?thumb=1&w=100&h=100&f=webp&q=90","title":"米家充气宝","desc":"","price":199,"del":0}]},{"topImg":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e2cf7dd837eb8d4690070d7dfa817d9.jpg?thumb=1&w=1226&h=120&f=webp&q=90","title":"搭配","subTitle":"耳机音箱","leftChilds":["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6874615b3c50e837ffe532eb6ea4ef1a.jpg?thumb=1&w=234&h=300&f=webp&q=90","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e4e456617d58227cc70d682b42fe90e3.jpg?thumb=1&w=234&h=300&f=webp&q=90"],"hotChilds":[{"id":40,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ea8e42faebf7d76a4cb42b8930cf9e46.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi充电宝 10000mAh 标准版 白色","desc":"10000mAh大电量 ","price":59,"del":0},{"id":41,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eaf70e0e9905de6452f07b1f48fcc386.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi充电宝 20000mAh 快充版","desc":"大容量，\t可上飞机 ","price":99,"del":0},{"id":42,"img":"https://i8.mifile.cn/v1/a1/287594eb-b765-8db1-3255-0a05c4c07440!200x200.jpg","title":"小米二合一数据线","desc":"两种接口，支持多种设备","price":19.9,"del":0},{"id":43,"img":"https://i8.mifile.cn/v1/a1/5dd69c0a-8f4a-b42f-d840-6c5a47f2cd03!200x200.jpg","title":"小米插线板 5孔位","desc":"多重安全保护","price":39,"del":0},{"id":44,"img":"https://i8.mifile.cn/b2c-mimall-media/d7fd9ecdca3959beae3fb5db59aa9aff!200x200.jpg","title":" 小米无线充电器","desc":"快速充电，轻巧便携","price":99,"del":0},{"id":45,"img":"https://i8.mifile.cn/b2c-mimall-media/92af1f21293fabfbf2a112892b864925!200x200.jpg","title":"小米蓝牙耳机AirDots青春版","desc":"雅致简约，收纳充电盒","price":189,"del":199},{"id":46,"img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/321610e787393c42e5cb2e5730a7681d.jpg?thumb=1&w=200&h=200","title":"小米小爱蓝牙音箱 随身版","desc":"小巧便携，一键唤醒小爱","price":49,"del":0},{"id":47,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9946e252a7c49662376c056ced004a20.jpg?thumb=1&w=100&h=100&f=webp&q=90","title":"小米小爱触屏音箱","desc":"","price":249,"del":0}],"childs":[{"id":48,"img":"https://i8.mifile.cn/b2c-mimall-media/ddf317f34e47eed06d910ee0ffd6b2fc!200x200.jpg","title":"小米双单元半入耳式耳机","desc":"半入耳式舒适佩戴","price":59,"del":69},{"id":49,"img":"https://i8.mifile.cn/b2c-mimall-media/838ba427ef55317d8c4911b02c95bb79!200x200.jpg","title":"小米蓝牙项圈耳机","desc":"挂在脖子上的好耳机","price":279,"del":299},{"id":50,"img":"https://i8.mifile.cn/b2c-mimall-media/a0e1b48582e68cecf4b3e32dd1b5549d!200x200.jpg","title":"小米圈铁耳机2","desc":"全面升级，让声音更有质感","price":99,"del":0},{"id":51,"img":"https://i8.mifile.cn/v1/a1/T1hVY_BTdv1RXrhCrK!200x200.jpg","title":"小米随身蓝牙音箱","desc":"全金属外壳，内置麦克风","price":69,"del":0},{"id":52,"img":"https://i8.mifile.cn/v1/a1/e4c0f21c-3bd4-323e-673b-a9c1c1c6e294!200x200.jpg","title":"小米蓝牙耳机青春版","desc":"6.5 克轻巧，高清通话音质","price":55,"del":59},{"id":53,"img":"https://i8.mifile.cn/v1/a1/852c3872-7aca-e565-b8fb-37aa3ce88979!200x200.jpg","title":"小米运动蓝牙耳机mini","desc":"迷你机身, 小如蚕豆","price":159,"del":169},{"id":54,"img":"https://i8.mifile.cn/b2c-mimall-media/92af1f21293fabfbf2a112892b864925!200x200.jpg","title":"小米蓝牙耳机AirDots青春版","desc":"雅致简约，收纳充电盒","price":189,"del":199}]},{"topImg":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/89c2a209b742fce9b10d9d196149d634.jpg?thumb=1&w=1226&h=120&f=webp&q=90","title":"配件","subTitle":"保护套","leftChilds":["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/544db5fa099db4177e79fb17043c8a8f.jpg?thumb=1&w=234&h=300&f=webp&q=90","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ffe4182f1d9a5befdf2380ec90ae1620.jpg?thumb=1&w=234&h=300&f=webp&q=90"],"hotChilds":[{"id":55,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c19fad90ad73f91e13c97cce2b15d82.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米9 SE 街头风保护壳","desc":"简约时尚，多彩三色","price":49,"del":0},{"id":56,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9dd5ef3ab726a9b9b9cd39587a1d0e86.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米CC9e 高透果冻保护壳","desc":"更薄更清透","price":49,"del":0},{"id":57,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8fb7f3be403cfcbe98576bee28c7cc25.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi K20 / K20 Pro 怪力魔王保护壳","desc":"怪力魔王专属定制","price":39,"del":0},{"id":58,"img":"https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/20bb12392d70e3b7158c252e9c34d0b0.jpg?thumb=1&w=200&h=200","title":"小米MIX 3 獬豸神兽保护壳","desc":"因为独特而备受瞩目","price":32.9,"del":69},{"id":59,"img":"https://i8.mifile.cn/v1/a1/T1C__gBmYv1RXrhCrK!200x200.jpg","title":"小米 USB充电器（4口）","desc":"化繁为简，以一敌四","price":59,"del":69},{"id":60,"img":"https://i8.mifile.cn/v1/a1/b0ded71f-b235-8f99-ba1c-20f80c3a4231!200x200.jpg","title":"米家LED随身灯","desc":"小巧轻便 5级亮度调节","price":19.9,"del":0},{"id":61,"img":"https://i8.mifile.cn/b2c-mimall-media/4132366589e457f407b918fe48c89cb1!200x200.jpg","title":"小米USB-C数据线 编织线版","desc":"高强度纤维编制线体","price":18.9,"del":199},{"id":62,"img":"https://i8.mifile.cn/v1/a1/T1hvC_BQdT1RXrhCrK!100x100.jpg","title":"USB Type-C 转接头","desc":"","price":5,"del":0}],"childs":[{"id":63,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5c200476bc9336d171931cb7ee2e4549.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米CC9&小米CC9美图定制版 标准高透贴膜","desc":"高清透亮，耐磨性强","price":19,"del":0},{"id":64,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/24f8b0547a798b69be1b868872ddd80f.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米CC9e 标准高透贴膜","desc":"高清透亮，耐磨性强","price":19,"del":0},{"id":65,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/958e872fe9930838e90de8acc9fffc28.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi 7A标准高透贴膜","desc":"高清高透，精彩清晰可见","price":19,"del":0},{"id":66,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5599ccd40bab44fb0f1722d150fe43f.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小仙女心愿手链保护壳","desc":"手链绕于指尖，仙气满满","price":199,"del":0},{"id":67,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d8a74ade6b1b5fbd0c88b9679c63832.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米CC9 荧光色高透果冻保护壳","desc":"玩转多彩青春色","price":49,"del":0},{"id":68,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8fb7f3be403cfcbe98576bee28c7cc25.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"Redmi K20 / K20 Pro 怪力魔王保护壳","desc":"怪力魔王专属定制","price":39,"del":0},{"id":69,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/39a5445afe8c48d9b92b2bf9d6d88a26.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米9 ARE U OK保护壳","desc":"一个与众不同的保护壳","price":39,"del":49},{"id":70,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/913e51883bf91da95c2f84b0776b95cf.jpg?thumb=1&w=100&h=100&f=webp&q=90","title":"小米9 RUOK保护壳","desc":"","price":39,"del":0}]},{"topImg":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/10fb0086cb21120c53248a3d8cc56dc5.jpg?thumb=1&w=1226&h=120&f=webp&q=90","title":"周边","subTitle":"出行","leftChilds":["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/99f1f43d9df484572bd81138f45dfc0f.jpg?thumb=1&w=234&h=300&f=webp&q=90","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0b8cffcbdaa88e2a314f0a372ca75dd.jpg?thumb=1&w=234&h=300&f=webp&q=90"],"hotChilds":[{"id":79,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"米家飞行员太阳镜 Pro","desc":"尼龙偏光，轻巧佩戴","price":199,"del":0},{"id":80,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/57433a4b991b2a2ddc889f2d8d434655.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米巨能写中性笔10支装","desc":"一支顶4支，超长顺滑书写","price":9.99,"del":0},{"id":81,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c149537ebb0c2cdb977ddd93200074f4.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米旅行箱 20英寸 布朗熊限量版","desc":"“国际巨星” LINE FRIENDS布朗熊","price":399,"del":0},{"id":82,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03d94ee6059481a6adcb6c4c5c572fb4.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"米家迷你保温杯","desc":"可以随身携带的温度","price":49,"del":0},{"id":83,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41e6890f9d6b7fdb4275c986dc3644e8.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"米家驱蚊器基础版 3个装","desc":"3个装 长效驱蚊","price":99,"del":129},{"id":84,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/38748fefeef78183ac01356a23dbc5c5.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"3卷装抽绳式垃圾袋","desc":"让清洁更简单","price":12.9,"del":14.9},{"id":85,"img":"https://i8.mifile.cn/v1/a1/413f5e2f-53e7-0879-119c-8b4466feea53!200x200.jpg","title":"贝医生巴氏牙刷 四色装","desc":"进口刷毛，好品质","price":39.9,"del":0},{"id":86,"img":"https://i8.mifile.cn/v1/a1/eaa7c8e5-2a8c-0d2c-6de7-a6db2068b192!100x100.jpg","title":"8H 乳胶弹簧静音床垫 M3","desc":"","price":1499,"del":0}],"childs":[{"id":71,"img":"https://i8.mifile.cn/b2c-mimall-media/8e40b697807d1c377e27ac8c0ce3d67e!200x200.jpg","title":"米家运动鞋2 男款","desc":"轻盈灵巧 动静皆宜","price":159,"del":199},{"id":72,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d26d3a80dd1ab0c6a657f13cb234dade.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"90分框体旅行箱","desc":"专利轻量合金中框，轻盈坚固 ","price":599,"del":0},{"id":73,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/47ecc65d37065fde1e71b1b34326e741.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米商旅多功能双肩包 2","desc":"商务旅行多场景，切换无压力","price":199,"del":0},{"id":74,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"米家飞行员太阳镜 Pro","desc":"尼龙偏光，轻巧佩戴","price":199,"del":0},{"id":75,"img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5f4677730c6be3ecab615795fb0e9c7.jpg?thumb=1&w=200&h=200&f=webp&q=90","title":"小米小背包","desc":"小身材大容量， 更精彩！","price":29,"del":0},{"id":76,"img":"https://i8.mifile.cn/v1/a1/e2775107-da04-6611-3580-82227ffec369!200x200.png","title":"Free Tie 真皮板鞋 米家定制","desc":"做一双简单的板鞋","price":129,"del":199},{"id":77,"img":"https://i8.mifile.cn/v1/a1/43549b8e-c8cd-0464-17ba-6be26f395ef0!200x200.jpg","title":"自动折叠伞","desc":"防泼水伞布，轻盈拒水","price":94,"del":99},{"id":78,"img":"https://i8.mifile.cn/b2c-mimall-media/1f4c867b5ccb878b43054f640636c872!100x100.jpg","title":"最生活毛巾•青春系列","desc":"","price":19.9,"del":0}]}]