用 gulp require.js 和 jQuery 写一个小米项目之-----轮播图和左侧导航栏的实现

最新推荐文章于 2022-12-04 13:19:11 发布

OrdnAry

最新推荐文章于 2022-12-04 13:19:11 发布

阅读量9.3k

点赞数

本文链接：https://blog.csdn.net/OrdnAry/article/details/110789114

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>
        <meta name="description" content="小米商城直营小米公司旗下所有产品，包括小米手机系列小米CC9、小米9、小米MIX 3，Redmi 红米系列Redmi K20 Pro、Redmi Note 8，小米电视、红米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持。" />
        <meta name="keywords" content="小米,小米9,小米cc9,Redmi K20,Redmi Note 8,小米MIX3,小米商城" />
        <link rel="shortcut icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="css/index.min.css"/> 
        <script src = 'js/require.js' defer async = 'true' data-main = 'js/main.js'></script>
    </head>
    <body> 
        <div id = 'app'>
            <div>
                <div class = 'header'>
                    <div class = 'site-topbar'>
                        <div class = 'container'>
                            <div class = 'topbar-nav'>
                                <a rel="nofollow"  href="#" >小米商城</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">MIUI</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">IoT</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">云服务</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">金融</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">有品</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">小爱开放平台</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">企业团购</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank">资质证照</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank"  >协议规则</a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="#" target="_blank" class="topbar-download" id="J_siteDownloadApp">
                                    下载app
                                    <span class="appcode">
                                        <img src="//i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城" width="90" height="90">
                                        小米商城APP
                                    </span>
                                </a>
                                <span class="sep">|</span>
                                <a rel="nofollow" href="javascript:;"  class="J_siteGlobalRegion">Select Location</a>
                            </div>
                            <div class = 'topbar-cart' id = 'J_miniCartTrigger'>
                                <a rel="nofollow" class="cart-mini" id="J_miniCartBtn">
                                    <em class="iconfont-cart"></em><em class="iconfont-cart-full hide"></em>购物车<span class="cart-mini-num J_cartNum"></span>
                                    <em class = 'iconfont-cart-full hide'></em>
                                    <span class = 'cart-mini-num J_cartNum'>（0）</span>
                                </a>
                                <div class="cart-menu" id="J_miniCartMenu">
                                    <div class="menu-content">
                                        <div class="loading"><div class="loader"></div></div>
                                        <ul class="cart-list hide" id="J_miniCartList"></ul>
                                        <div class="cart-total clearfix hide" id="J_miniCartListTotal"></div>
                                        <div class="msg msg-error hide"></div>
                                        <div class="msg msg-empty hide">购物车中还没有商品，赶紧选购吧！</div>
                                    </div>
                                </div>
                            </div>
                            <div class = 'topbar-info' id = 'J_siteUserInfo'>
                                <a href="#" class = 'link' >登录</a>
                                <span class = 'sep'>|</span>
                                <a href="#" class = 'link'>注册</a>
                            </div>
                        </div>
                    </div>
                    <div class = 'site-header'>
                        <div class = 'container'>
                            <div class = 'header-logo'>
                                <a class="logo ir" href="/index.html" title="小米官网" onclick = "_msq.push(['trackEvent', '81190ccc4d52f577-1de2e5c522d7b543', '//www.mi.com/index.html', 'pcpid', '']);">小米官网</a>
                            </div>
                            <div class = 'header-nav'>
                                <ul class = 'nav-list J_navMainList clearfix'>
                                    <!--顶部导航-->>
                                    <li id = 'J_navCategory' class = 'nav-category'>
                                        <a href="#" class = 'link-category'>
                                            <span class = 'text'>全部商品分类</span>
                                        </a>
                                        <!--侧边导航-->
                                        <div class = 'site-category' style="display: block">
                                            <ul id = 'J_categoryList' class = 'site-category-list clearfix  site-category-list-custom'>                                 
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                          <!--顶部导航-->> 
                        <div id = 'J_navMenu' class="header-nav-menu header-nav-menu-active slide-up" style = 'display: none'>
                            <div class = 'container'>
                                
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 轮播图 -->
            <div class = 'home-hero-container container'>
                    <!-- 轮播图 -->
                    <div id = 'J_homeSwiper' class = 'swiper-container home-hero-swiper swiper-no-swiping swiper-container-fade swiper-container-initialized swiper-container-horizontal'>
                        <div class = 'swiper-slide'>
                            
                        </div>
                        <div class = 'swiper-pagination swiper-pagination-clickable swiper-pagination-bullets'>
                            <!-- <a href="#" class = 'swiper-pagination-bullet swiper-pagination-bullet-active'></a> -->
                        </div>
                    </div>
                    <div class = 'swiper-button-prev' aria-label="Previous slide"></div>
                    <div class = 'swiper-button-next' aria-label="Next slide"></div>
            </div>
    </body>
</html>

gulofile.js中的配置

/*
    把 .scss文件 => csswenjian =>压缩 => min.css
*/ 

const gulp = require("gulp");
const scss = require("gulp-sass");
const minifyCSS = require("gulp-minify-css");
const rename = require("gulp-rename");

gulp.task("scss",function(){
    return gulp.src("stylesheet/index.scss")
    .pipe(scss())
    .pipe(gulp.dest("dist/css"))
    .pipe(minifyCSS()) 
    .pipe(rename("index.min.css"))
    .pipe(gulp.dest("dist/css"))
    .pipe(connect.reload());
})
/*
    批量处理
*/
gulp.task("scssAll",function(){

    return gulp.src("stylesheet/*.scss")
    .pipe(scss())
    .pipe(gulp.dest("dist/css"))
    .pipe(connect.reload());
})
/*
    处理.js  把JS放入dist/js中
*/
gulp.task("scripts",function(){
    return gulp.src(["*.js","!gulpfile.js"])
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
})
/*
    处理html
*/
gulp.task("copy-html",function(){
    return gulp.src(["*.html"])
    .pipe(gulp.dest("dist"))
    .pipe(connect.reload());
})
//处理数据
gulp.task("data",function(){
    return gulp.src(["*.json","!package.json"])
    .pipe(gulp.dest("dist/data"))
    .pipe(connect.reload());
})

//处理图片
gulp.task("images",function(){ 
    return gulp.src("images/**/*")
    .pipe(gulp.dest("dist/images"))
    .pipe(connect.reload());
})

//一次性执行多个任务

gulp.task("build",["scss","scripts","copy-html","data","scssAll","images"],function(){
    console.log("项目建立成功")
}
)

//建立监听
gulp.task("watch",function(){

    gulp.watch("stylesheet/index.scss",["scss"]);
    gulp.watch("stylesheet/*.scss",["scssAll"]);
    gulp.watch(["*.js","!gulpfile.js"],["scripts"]);
    gulp.watch(["*.html"],["copy-html"]);
    gulp.watch(["*.json","!package.json"],["data"]);
    gulp.watch("images/**/*",["images"]);
})

//启动服务器  gulp-connect
const  connect = require("gulp-connect");

gulp.task("server",function(){
    connect.server({
        root:"dist",
        port:8887, //0~65535
        livereload:true
    })
})

//启动一个默认的任务  直接使用gulp

gulp.task("default",["watch","server"]);

监听项目
在这里插入图片描述

在main.js中配置require规范

 /*
    配置当前这个项目用到了哪些模块
    遵从的都是AMD规范

    所有.js文件 的后缀课省略
 */
require.config({
    paths:{
        "jquery":"jquery-1.11.3",
        "jquery-cookie":"jquery.cookie",
        "nav":"nav"
    },
    shim:{
        //设置依赖关系（不符合规范的要用这个shim来使他符合规范）
        "jquery-cookie":["jquery"] 
    }
}) 
//不要忘记调用函数！！！
require(["nav"],function(nav){
    nav.download();
    nav.banner();
    nav.leftdaohang();
    nav.lefthideshow();
})

首页的实现之--------轮播图和左侧导航栏(nav.js)

define(["jquery"],function(){
    function download(){
        //数据下载
        $.ajax({
            type:"get",
            url:"../data/nav.json",
            success:function(result){
                // alert(result);
                var bannerArr = result.banner;//获取json中轮播图的数据
                for(var i=0; i< bannerArr.length; i++){
                    $(`<a href="${bannerArr[i].url}">
                    <img class='swiper-lazy swiper-lazy-loaded' src = 'images/banner/${bannerArr[i].img}' alt=""/>
                    </a>`).appendTo("#J_homeSwiper .swiper-slide"); //把图片插入到轮播图的位置

                    var node = $(`<a href="#" class = 'swiper-pagination-bullet'></a>`); //定义圆点

                    if(i==0){
                        node.addClass("swiper-pagination-bullet-active"); //把第一个圆点显示白色
                    }
                    
                    node.appendTo("#J_homeSwiper .swiper-pagination");//把圆点插入位置中
                     
                }  
            }, 
            error:function(msg){
                console.log(msg);
            }
        })
    }
    function banner(){
        var xiabiao = 0 ; //获取图片的下标
        var tupian =null ; //获取图片
        var yuandian = null ; //获取圆点
        //定时器切换图片
        var timer = setInterval(function(){
            xiabiao++;  
            qiehuan();               
        },2500);

        //图片的切换
        function qiehuan(){
            if(!tupian){
                tupian = $("#J_homeSwiper .swiper-slide").find("a");
            }if(!yuandian){
                yuandian = $("#J_homeSwiper .swiper-pagination").find("a");
            }
            //如果是最后一张图片 跳到第一张图
            if(xiabiao == 5){
                xiabiao =0;
            }  
            /*吧所有图片隐藏然后设置透明度为0.2 之后找到切换图片的下标 将其显示出来 最后用动画将
            需要显示的图片用动画设置显示*/
            tupian.hide().css("opacity",0.2).eq(xiabiao).show().animate({opacity:1},500);

            //圆点切换先移出白色  之后找到下标  最后添加白色
            yuandian.removeClass("swiper-pagination-bullet-active").eq(xiabiao).addClass("swiper-pagination-bullet-active");
        }


        //  如果鼠标移入停止定时器   鼠标移出启动定时器
        $("#J_homeSwiper,.swiper-button-prev,.swiper-button-next").mouseenter(function(){
            clearInterval(timer);
            // console.log(timer);
        }).mouseleave(function(){
            timer = setInterval(function(){
                xiabiao++;  
                qiehuan();               
            },2500);    
        });
        
        //点击小圆圈跳到对应图片  事件委托处理 （因为是ajax动态插进去的 不用事件委托找不到标签）
        $("#J_homeSwiper .swiper-pagination").on("click","a",function(){
            xiabiao = $(this).index(); //找到下标
            qiehuan(); //切换
            return false;   //阻止a连接重新刷新
        });
        //点击上下一张切换
        $(".swiper-button-prev,.swiper-button-next").click(function(){
           
            if(this.className == "swiper-button-prev"){
                xiabiao--;
                if(xiabiao < 0){
                    xiabiao = 4;   
                }
            }else{
                xiabiao++;
            }
            qiehuan();
        })
    }

    //主页侧边栏导航
    function leftdaohang(){
        $.ajax({
            url:"../data/nav.json",
            success: function(result){
                var leftArr = result.sideNav;//获取数据
                // alert(leftArr[0].title);
                for(var i=0; i< leftArr.length ; i++){
                    var node = $(`<li class = 'category-item'>
                    <a href="/index.html" class = 'title'>
                        ${leftArr[i].title}
                        <em class = 'iconfont-arrow-right-big'></em>
                    </a>
                    <div class="children clearfix children-col-4">
                       
                    </div> 
                     </li>`);
                    //把li标签插入到导航栏中
                    node.appendTo("#J_categoryList");
                    //找到子标签中的数据
                    var childArr = leftArr[i].child;

                    //每6个商品是一行  计算需要几行
                    var col = Math.ceil(childArr.length / 6);

                    for(var j = 0; j < childArr.length; j++){
                        if(j % 6 ==0){
                           var newUl = $(`<ul class="children-list children-list-col children-list-col-${col}">
                        </ul>`);
                        newUl.appendTo(node.find("div.children"));
                        }
                        $(`<li>
                        <a href="http://www.mi.com/redminote8pro">
                            <img src="${childArr[j].img}"  width="40" height="40" class="thumb">
                            <span class="text">${childArr[j].title}</span>
                        </a>
                        </li>`).appendTo(newUl);//把需要显示出来的li插入到分好组的ul中
                    }
                }
            },
            error: function(esg){
                console.log(esg);
            }
        })
    }
    //给侧边栏添加鼠标移入移出  事件委托
    function lefthideshow(){
        $(`#J_categoryList`).on("mouseenter",".category-item", function(){
            $(this).addClass("category-item-active");
        }).on("mouseleave",".category-item",function(){
            $(this).removeClass("category-item-active");
        });
    }
    //千万不要忘记返回  而且要在main.js中调用这个函数！！！
    return {
        download: download,
        banner:banner,
        leftdaohang:leftdaohang,
        lefthideshow:lefthideshow
    }
})

结果展示

在这里插入图片描述

用到的json数据

在这里插入图片描述

{"topNav":[{"title":"小米手机","childs":[{"id":"1","span":"新品","img":"../images/02.png","a":"小米CC9","i":"1799元起"},{"id":"2","span":"新品","img":"../images/03.png","a":"小米CC9e","i":"1299元起"},{"id":"3","span":"新品","img":"../images/320.png","a":"小米CC9美图定制版","i":"2599元"},{"id":"4","img":"../images/mi9-320.png","a":"小米9","i":"1799元起"},{"id":"5","img":"../images/888.jpg","a":"小米8 屏幕指纹版","i":"1799元起"},{"id":"6","img":"../images/mix.png","a":"小米MIX 3","i":"2999元"}]},{"title":"Redmi 红米","childs":[{"id":"7","span":"新品","img":"../images/red.jpg","a":"Redmi K20 Pro","i":"2499元起"},{"id":"8","span":"新品","img":"../images/lanse.jpg","a":"Redmi K20","i":"1999元起"},{"id":"9","span":"新品","img":"../images/black.jpg","a":"Redmi 7A","i":"549元起"},{"id":"10","img":"../images/redmi.jpg","a":"Redmi Note7 Pro","i":"1399元"},{"id":"11","img":"../images/note7320-220.png","a":"Redmi Note7","i":"999元起"},{"id":"12","img":"../images/lanse.jpg","a":"Redmi 7","i":"699元起"}]},{"title":"电视","childs":[{"id":"13","span":"新品","img":"../images/bihuadianshi.jpg","a":"小米壁画电视 65英寸","i":"6999元"},{"id":"14","span":"新品","img":"../images/quanmianping55A.jpg","a":"小米全面屏电视E55A","i":"2099元"},{"id":"15","span":"热卖","img":"../images/32.png","a":"小米电视4A 32英寸","i":"769元"},{"id":"16","span":"热卖","img":"../images/4A-55.jpg","a":"小米电视4A-55英寸","i":"1999元"},{"id":"17","span":"热卖","img":"../images/4a653202201.jpg","a":"小米电视4A 65英寸","i":"2999元"},{"id":"18","img":"../images/475toutu.png","a":"查看全部","i":"小米电视"}]},{"title":"笔记本","childs":[{"id":"19","span":"新品","img":"../images/RedmiBook.png","a":"RedmiBook 14","i":"3999元"},{"id":"20","span":"新品","img":"../images/12.5yinsetoubu.png","a":"小米笔记本Air 12.5","i":"3599元"},{"id":"21","span":"新品","img":"../images/13.3huise.png","a":"小米笔记本Air 13.3","i":"4999元"},{"id":"22","img":"../images/rubyheise.png","a":"小米笔记本 15.6","i":"2899元起"},{"id":"23","img":"../images/WechatIMG603.png","a":"小米电视4A 65英寸","i":"2999元"},{"id":"24","img":"../images/xinbijiben.png","a":"查看全部","i":"小米电视"}]},{"title":"家电","childs":[{"id":"25","span":"热卖","img":"../images/yijinengxiaokongtiao.png","a":"米家互联网空调(一级能效)","i":"2199元"},{"id":"26","span":"热卖","img":"../images/xihongxin.png","a":"米家互联网洗烘一体机 10kg","i":"1899元"},{"id":"27","span":"热卖","img":"../images/redmixiyiji.jpg","a":"Redmi全自动波轮洗衣机1A","i":"699元"},{"id":"28","img":"../images/xiaomijingshuiqi.jpg","a":"小米净水器","i":"1799元"},{"id":"29","img":"../images/saodijiqiren320-220.jpg","a":"米家扫地机器人","i":"1699元"},{"id":"30","img":"../images/yanzao.jpg","a":"烟灶套装","i":"1999元"}]},{"title":"路由器","childs":[{"id":"31","span":"新品","img":"../images/luyoumesh.jpg","a":"小米路由器Mesh","i":"999元"},{"id":"32","span":"双频双核","img":"../images/qianzhao.jpg","a":"小米路由器4A千兆版","i":"169元"},{"id":"33","span":"热卖","img":"../images/luyouqi41C.jpg","a":"小米路由器4C","i":"99元"},{"id":"34","img":"../images/luyouqi41C.jpg","a":"小米路由器4A","i":"119元"},{"id":"35","span":"大容量","img":"../images/PRO.png","a":"小米路由器 HD/Pro","i":"499元起"},{"id":"36","img":"../images/quanbuluyouqi.png","a":"查看全部小米路由器"}]},{"title":"智能硬件","childs":[{"id":"37","span":"热卖","img":"../images/yuntai.jpg","a":"小米只能摄像机云台版","i":"199元"},{"id":"38","span":"新品","img":"../images/xiaoailaoshi.jpg","a":"小米小爱老师","i":"499元"},{"id":"39","span":"热卖","img":"../images/mensuo.jpg","a":"小米米家智能门锁","i":"1199元"},{"id":"40","span":"热卖","img":"../images/chuping.jpg","a":"小米小爱触屏音箱","i":"299元"},{"id":"41","span":"新品","img":"../images/wannengyaokong.jpg","a":"小爱万能遥控版","i":"199元"},{"id":"42","img":"../images/shouh4.jpg","a":"查看全部","i":"智能硬件"}]}],"sideNav":[{"title":"手机 电话卡","child":[{"title":"小米CC9","img":"../images/n1.png"},{"title":"小米8 屏幕指纹版","img":"../images/n2.png"},{"title":"Redmi K20","img":"../images/n3.jpg"},{"title":"对比手机","img":"../images/n5.jpg"},{"title":"小米CC美图定制版","img":"../images/n6.png"},{"title":"小米MIX 2S","img":"../images/mix2s80-80white.png"},{"title":"Redmi 7A","img":"../images/heisedi.jpg"},{"title":"米粉卡 日租卡","img":"../images/mifenka-1.jpg"},{"title":"小米CC9e","img":"../images/80-80-new.png"},{"title":"小米Max 3","img":"../images/max3-80-80.png"},{"title":"Redmi 7","img":"../images/redminote7pro.jpg"},{"title":"小米移动 电话卡","img":"../images/mimobile.jpg"},{"title":"小米9","img":"../images/mi9-80.png"},{"title":"黑鲨游戏手机2 Pro","img":"../images/123.jpg"},{"title":"红米note7 Pro","img":"../images/800-800.png"},{"title":"手机上门维修","img":"../images/weixiu80-80.png"},{"title":"小米9SE","img":"../images/03.png"},{"title":"黑鲨游戏手机2","img":"../images//123.jpg"},{"title":"Redmi Note7","img":"../images/note780-80.png"},{"title":"云服务空间月卡","img":"../images/yunfuwu.jpg"},{"title":"小米MIX 3","img":"../images/mix3-80.png"},{"title":"Redmi K20 Pro","img":"../images/red.jpg"},{"title":"移动4G+专区","img":"../images/80.jpg"}]},{"title":"电视 盒子","child":[{"title":"米家激光投影电视","img":"../images/mijiajiguang4k.jpg"},{"title":"小米电视4A 50英寸","img":"../images/TV4S-32.png"},{"title":"小米电视4C 43英寸","img":"../images/4C55.jpg"},{"title":"小米电视4 55英寸","img":"../images/TV4-55.png"},{"title":"小米壁画电视 65英寸","img":"../images/bihua.jpg"},{"title":"小米电视4A 55英寸","img":"../images/4A-55.jpg"},{"title":"小米电视4C 50英寸","img":"../images/TV4C-50.png"},{"title":"小米电视4 65英寸旗舰版","img":"../images/475.jpg"},{"title":"小米全面屏电视","img":"../images/65yiti.jpg"},{"title":"小米电视4A 58英寸","img":"../images/TV4A-58-x.png"},{"title":"小米电视4C 55英寸","img":"../images/TV4C-43.png"},{"title":"小米电视4 75英寸","img":"../images/475.jpg"},{"title":"小米电视4A 32英寸","img":"../images/32.png"},{"title":"小米电视4A 65英寸","img":"../images/65120_120.png"},{"title":"小米电视4X 43英寸","img":"../images/4X65.jpg"},{"title":"小米电视4S","img":"../images/TV4S-32.png"},{"title":"小米电视4A 43英寸青春版","img":"../images/TV4A-43QC.png"},{"title":"小米电视4C 32英寸","img":"../images/TV4C-32.png"},{"title":"小米电视4X 55英寸","img":"../images/TV4X-55.png"},{"title":"小米电视 体育版","img":"../images/TVTYB.png"},{"title":"小米电视4A 49英寸","img":"../images/TV4-55.png"},{"title":"小米电视4C 40英寸","img":"../images/4c-40.jpg"},{"title":"小米电视4X 65英寸","img":"../images/TV4X-43xin.png"},{"title":"小米盒子","img":"../images/hezibai480_80.jpg"}]},{"title":"笔记本 平板","child":[{"title":"小米笔记本 15.6''","img":"../images/bijiben80.jpg"},{"title":"键盘","img":"../images/yuemijianpan80.jpg"},{"title":"小米笔记本 13.3''","img":"../images/80x80.png"},{"title":"鼠标/鼠标垫","img":"../images/wxsb80.png"},{"title":"小米笔记本 12.5''","img":"../images/bijiben80.jpg"},{"title":"转接器","img":"../images/usbzjqggg80.jpg"},{"title":"RedmiBook 14","img":"../images/RedmiBook.png"},{"title":"平板配件","img":"../images/qianbao-80.jpg"},{"title":"小米游戏本","img":"../images/xinbijiben.png"},{"title":"笔记本双肩包","img":"../images/bijibenshuangjianbao80.jpg"},{"title":"小米平板4","img":"../images/heisedi.jpg"},{"title":"小米笔记本内胆包","img":"../images/neidanbao80.jpg"}]},{"title":"家电 插线板","child":[{"title":"米家立式空调","img":"../images/lishikongtiao.png"},{"title":"扫地机器人","img":"../images/saodijiqiren320-220.jpg"},{"title":"电水壶","img":"../images/dianshuihu-80.jpg"},{"title":"新风机","img":"../images/xinfengji.jpg"},{"title":"米家空调","img":"../images/yijinengxiaokongtiao.png"},{"title":"吸尘器","img":"../images/xichenqi.jpg"},{"title":"滤水壶","img":"../images/lvshuihu80.jpg"},{"title":"电暖器","img":"../images/diannuanqi.jpg"},{"title":"米家洗烘一体机","img":"../images/xihongyitipro_80x80.png"},{"title":"空气净化器","img":"../images/jinghuaqi2S-80.jpg"},{"title":"落地风扇","img":"../images/mijiadianfengshan80.png"},{"title":"电压力锅","img":"../images/yalidianfan.jpg"},{"title":"Redmi全自动波轮洗衣机","img":"../images/xihongxin.png"},{"title":"电饭煲","img":"../images/yalidianfanbao-80.jpg"},{"title":"投影仪","img":"../images/touyingqingchun.png"},{"title":"料理机","img":"../images/liaoli.jpg"},{"title":"净水器","img":"../images/jingshuiqi80haha.jpg"},{"title":"电磁炉","img":"../images/diancilu-80.jpg"},{"title":"灯具","img":"../images/xidingdeng-80.jpg"},{"title":"电煮壶","img":"../images/dianzhuhu.jpg"},{"title":"净水器滤芯","img":"../images/lvxinbashi.png"},{"title":"厨房用具","img":"../images/tangguo-80.jpg"},{"title":"插线板","img":"../images/chaxianban80.jpg"},{"title":"加湿器","img":"../images/jiashiqi_80x80.png"}]},{"title":"出行 穿戴","child":[{"title":"手环手表","img":"../images/shouhuan_80x80.png"},{"title":"智能后视镜","img":"../images/mirror-80.jpg"},{"title":"VR","img":"../images/VRyitiji80.jpg"},{"title":"智能记录仪","img":"../images/jiluyi.jpg"},{"title":"平衡车","img":"../images/scooter-80.jpg"},{"title":"车载空气净化器","img":"../images/chezaikongjing.jpg"},{"title":"滑板车","img":"../images/scooter2-80.jpg"},{"title":"无线车充","img":"../images/chechong.jpg"},{"title":"车载逆变器","img":"../images/chezainibianqi80.jpg"},{"title":"充气宝","img":"../images/chongqi.jpg"},{"title":"平衡车配件","img":"../images/peijian80.jpg"},{"title":"平衡轮","img":"../images/pinghenglun.jpg"}]},{"title":"智能 路由器","child":[{"title":"打印机","img":"../images/zhaopiandayinj.jpg"},{"title":"照相机","img":"../images/zhaopiandayinj.jpg"},{"title":"路由器","img":"../images/qianzhao.jpg"},{"title":"智能门锁","img":"../images/mensuo.jpg"},{"title":"智能家庭","img":"../images/zhinengjiating80.jpg"},{"title":"视频门铃","img":"../images/menling.jpg"},{"title":"对讲机","img":"../images/duijiangji.jpg"},{"title":"小爱老师","img":"../images/laoshi_80x80.png"},{"title":"无人机","img":"../images/wurenji80.jpg"},{"title":"小爱音箱","img":"../images/play.jpg"},{"title":"摄像机","img":"../images/zhaopiandayinj.jpg"}]},{"title":"电源 配件","child":[{"title":"移动电源","img":"../images/dianyuan2.100080.jpg"},{"title":"自拍杆","img":"../images/zipaigan80.jpg"},{"title":"其他配件","img":"../images/qitapeijian80.jpg"},{"title":"数据线","img":"../images/shujuxian-80.jpg"},{"title":"手机壳","img":"../images/baohu.jpg"},{"title":"车充","img":"../images/chezaichongdianqi80.jpg"},{"title":"手机贴膜","img":"../images/tiemo.jpg"},{"title":"充电器","img":"../images/chongdianqi-80.jpg"},{"title":"手机支架","img":"../images/shoujizhijia80.jpg"},{"title":"无线充","img":"../images/chechong.jpg"},{"title":"平板配件","img":"../images/pingban80.jpg"},{"title":"电池","img":"../images/7Battery1.jpg"},{"title":"黑鲨配件","img":"../images/123.jpg"}]},{"title":"健康 儿童","child":[{"title":"洗手机","img":"../images/xishouji.jpg"},{"title":"体脂称","img":"../images/tizhicheng.jpg"},{"title":"儿童滑板车","img":"../images/huabanche80.jpg"},{"title":"走步机","img":"../images/zoubu.jpg"},{"title":"剃须刀","img":"../images/tixvdao80.jpg"},{"title":"体温计","img":"../images/tiwenji80.jpg"},{"title":"米兔拉杆箱","img":"../images/lvxingxiang.jpg"},{"title":"点读笔","img":"../images/diandubi.jpg"},{"title":"日光镜","img":"../images/riguang.jpg"},{"title":"早教启智","img":"../images/mitugushi-80.jpg"},{"title":"婴儿推车","img":"../images/tuiche.jpg"},{"title":"牙刷","img":"../images/yashua80.jpg"},{"title":"遥控电动","img":"../images/XIAOFEIJIBASHI.jpg"},{"title":"儿童书包","img":"../images/shubao2.jpg"},{"title":"吹风机","img":"../images/chuifengji.jpg"},{"title":"益智积木","img":"../images/toyblock2-80.jpg"},{"title":"婴儿理发器","img":"../images/lifa.jpg"},{"title":"体重秤","img":"../images/tizhicheng.jpg"},{"title":"儿童手表","img":"../images/shoubiao280.jpg"},{"title":"儿童保温杯","img":"../images/baowenb.jpg"}]},{"title":"耳机 音箱","child":[{"title":"小米小爱音箱Play版","img":"../images/play.jpg"},{"title":"小米AI音箱","img":"../images/xiaoai.jpg"},{"title":"线控耳机","img":"../images/erji80.jpg"},{"title":"小米小爱音箱HD","img":"../images/xiaoaiyinxhd.jpg"},{"title":"蓝牙耳机","img":"../images/airdots.jpg"},{"title":"K歌耳机","img":"../images/kgeerji.jpg"},{"title":"头戴耳机","img":"../images/toudai80.jpg"},{"title":"小爱音箱 万能遥控版","img":"../images/yaokong.jpg"},{"title":"品牌耳机","img":"../images/pinpai80.jpg"},{"title":"小爱触屏音箱","img":"../images/chupidng.jpg"},{"title":"蓝牙音箱","img":"../images/800-800-3.jpg"}]},{"title":"生活 箱包","child":[{"title":"双肩包","img":"../images/xiangbao-80.jpg"},{"title":"床垫","img":"../images/chuangdian-80-80.jpg"},{"title":"伞","img":"../images/umbrella.jpg"},{"title":"床","img":"../images/chuang.jpg"},{"title":"钱包","img":"../images/qianbao-80.jpg"},{"title":"枕头","img":"../images/zhent.ou80.png"},{"title":"驱蚊器","img":"../images/quwenqi.jpg"},{"title":"旅行箱","img":"../images/lvxingxiang.jpg"},{"title":"沙发","img":"../images/shafa.80.png"},{"title":"尤克里里","img":"../images/ukelele.jpg"},{"title":"运动鞋","img":"../images/shenhuahui80.jpg"},{"title":"饰品","img":"../images/jinmitu.jpg"},{"title":"毛巾/浴巾","img":"../images/maojinmaojin.jpg"},{"title":"服饰","img":"../images/txv80.jpg"},{"title":"螺丝刀","img":"../images/luosidao-80.jpg"},{"title":"米兔","img":"../images/mitu-80.jpg"},{"title":"眼镜","img":"../images/tyj80.jpg"},{"title":"保温杯","img":"../images/bbbbei.jpg"},{"title":"笔","img":"../images/junengxie.jpg"}]}],"banner":[{"img":"1.jpg","url":"http://www.mi.com/redminote8"},{"img":"2.jpg","url":"http://www.mi.com/redminote8pro"},{"img":"3.jpg","url":"http://www.mi.com/redmibook14-zqb"},{"img":"4.jpg","url":"https://www.mi.com/a/h/11570.html"},{"img":"5.jpg","url":"https://www.mi.com/a/h/11544.html"}]}

OrdnAry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用 gulp require.js 和 jQuery 写一个小米项目之-----轮播图和左侧导航栏的实现

gulofile.js中的配置/* 把 .scss文件 => csswenjian =>压缩 => min.css*/ const gulp = require("gulp");const scss = require("gulp-sass");const minifyCSS = require("gulp-minify-css");const rename = require("gulp-rename");gulp.task("scss",function(){
复制链接

扫一扫