仿美团--详情页与购物车开发

其他 2020-03-22 23:17:32 阅读次数: 0

效果图

首先是目录结构

menu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <script>
        (function(){
            //这段代码放在所有的样式文件之前，设置html根元素的fontSize
            var docEl=document.documentElement;

            function setRem(){
                // 这个10不是固定的，只是计算出来的rem要和cssrem插件setting中设置的37.5保持一致
                // iphone6设备宽度是375，因此基准值刚好是10
                var rem=docEl.clientWidth/10;//获取基准值
                docEl.style.fontSize=rem+"px";//动态设置html根元素的fontSize
            }

            setRem();

            window.addEventListener("resize",setRem);

            //用户每次浏览页面的时候， 就会触发pagesshow方法（有兼容性问题）
            window.addEventListener("pageshow",function(e){
                // 使用e.presisted就是判断当前页面是不是在缓存中加载
                // 如果缓存中加载（就是为true的时候），重新设置rem
                if(e.persisted){
                    setRem();
                }
            });
        })();

    </script>
    <link rel="stylesheet" href="../lib/reset.css"><!-- 拷贝一份通用重置样式 -->
    <link rel="stylesheet" href="menu.css">
    <link rel="stylesheet" href="../common/common.css">
</head>
<body>
    <!-- 头部开始 -->
    <div class="nav">
        <div class="back-icon"></div>
        <h4 class="title">深圳麦当劳前海二餐厅</h4>
    </div>
    <!-- 头部结束 -->

    <!-- tab开始 -->
    <div class="tab-bar"></div>
    <!-- tab结束 -->

    <!-- 点菜内容开始 -->
    <div class="menu-inner">
        <!-- 左侧tab -->
        <div class="left-bar">
            <div class="left-bar-inner"></div>
        </div>
        <!-- 右侧商品 -->
        <div class="right-content">
            <p class="right-title"></p>
            <div class="right-list">
                <div class="right-list-inner"></div>
            </div>
        </div>
        <!-- 购物车 -->
        <div class="shop-bar"></div>
        <!-- 遮罩 -->
        <div class="mask hide"></div>
    </div>
    <!-- 点菜内容结束 -->

    <script src="../lib/jquery.min.js"></script>
    <script src="menu.js"></script>
    <script src="../common/common.js"></script>
</body>
</html>

menu.css

/*header-tab*/
.tab-bar{
    font-size:0.426667rem;
    display:flex;
    border-bottom:0.026667rem solid #f0f0f0;
    margin-top:1.706667rem;
}
.tab-bar .tab-item{
    flex:1;
    height:1.2rem;
    line-height:1.2rem;
    position: relative;
    color:#666;
    text-align:center;
    text-decoration: none;
}
.tab-bar .tab-item.active::after{
    content:"";
    display: block;
    position: absolute;
    width:1.6rem;
    height:0.106667rem;
    bottom:0;
    background:#ffd161;/*美团黄*/
    /*设置居中*/
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}

/*menu-inner*/
.menu-inner{
    position: absolute;
    top:2.933333rem;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    overflow:hidden;
}
.menu-inner .left-bar{
    width:2.266667rem;
    background:#efefef;
    overflow:auto;
    height:100%;
    -webkit-overflow-scrolling:touch;/*局部滚动，尤其是移动端ios*/
}
.menu-inner .left-bar-inner{
    padding-bottom:2.266667rem;
}
.menu-inner .left-item{
    font-size:0.373333rem;
    color:#656565;
    text-align:center;
    border-bottom:0.026667rem solid #bfbfbf;
    display: flex;
    justify-content: center;
    height:1.6rem;
}
.menu-inner .left-item.active{
    background:#fff;
}
.menu-inner .item-text{
    text-align:center;
    align-self:center;
}
.menu-inner .item-icon{
    width:0.533333rem;
    height:0.533333rem;
    display: inline-block;
    margin-right:0.16rem;
    vertical-align:-0.106667rem;
}
.menu-inner .right-content{
    flex:1;
    margin-left:0.266667rem;
    height:100%;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;/*触屏滚动*/
}
.menu-inner .right-title{
    font-size:0.346667rem;
    color:#333;
    margin-top:0.266667rem;
    padding-left:0.106667rem;
    border-left:0.053333rem solid #ffd161;
}
.menu-inner .right-list{
    height:100%;
    overflow:auto;/*可滚动*/
}
.menu-inner .right-list-inner{
    font-size:0.426667rem;
    padding-bottom:2.266667rem;
}
.right-list-inner .menu-item{
    display: flex;
    padding:0.666667rem 0;
    border-bottom:0.026667rem solid #f0f0f0;
    position: relative;
}
.right-list-inner .img{
    width:1.653333rem;
    height:1.653333rem;
    margin-right:0.266667rem;
}
.right-list-inner .menu-item-right{
    flex:1;
}
.right-list-inner .item-title{
    font-size:0.426667rem;
    color:#2f2f2f;
}
.right-list-inner .item-desc,
.right-list-inner .item-zan{
    color:#a9a9a9;
    font-size:0.32rem;
    margin-top:0.16rem;
    line-height:0.373333rem;
    padding-right:0.106667rem;
}
.right-list-inner .item-desc{
    line-height:0.453333rem;
}
.right-list-inner .item-price{
    margin-top:0.266667rem;
    color:#fe4d3d;
    font-size:0.48rem;
}
.right-list-inner .unit{
    color:#a9a9a9;
    font-size:0.32rem;
}
.right-list-inner .select-content{
    position: absolute;
    right:0.24rem;
    bottom:0.56rem;
    display: flex;
}
.right-list-inner .minus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/minus.png);    
    background-size:cover;
}
.right-list-inner .count{
    font-size:0.4rem;
    color:#2f2f2f;
    width:0.666667rem;
    height:0.666667rem;
    line-height:0.666667rem;
    margin:0 0.053333rem;
    text-align:center;
}
.right-list-inner .plus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/plus.png);    
    background-size:cover;
}

/*shopbar*/
.shop-bar{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:99;
}
.shop-bar .choose-content{
    background:#fff;
}
.shop-bar .content-top{
    height:0.933333rem;
    background-color:#f4f4f4;
    font-size:0.293333rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.shop-bar .clear-car{
    margin:0 0.133333rem 0 0.266667rem;
    position: relative;
}
.shop-bar .clear-car::after{
    content:"";
    width:0.346667rem;
    height:0.346667rem;
    display: block;
    background-image:url(images/clear.jpeg);
    background-size:cover;
    position: absolute;
    top:-0.026667rem;
    left:-0.373333rem;
}
.shop-bar .bottom-content{
    height:1.333333rem;
    display: flex;
    background:rgba(51,51,51,.9);
}
.shop-bar .shop-icon{
    width:1.466667rem;
    height:1.466667rem;
    background-image:url(images/shop-icon.png);
    background-size:cover;
    margin-top:-0.4rem;
    margin-left:0.32rem;
    position: relative;
}
.shop-bar .dot-num{
    position: absolute;
    background-color: #fb4e44;
    width:0.4rem;
    height:0.4rem;
    font-size:0.32rem;
    color:#fff;
    border:0.026667rem solid #fff;
    border-radius:50%;
    right:0;
    top:0.053333rem;
    text-align: center;
    line-height:0.4rem;
}
.shop-bar .price-content{
    flex:1;
    padding-top:0.213333rem;
    padding-left:0.186667rem;
}
.shop-bar .total-price{
    font-size:0.533333rem;
    color:#fff;
}
.shop-bar .total-price-span{

}
.shop-bar .other-price{
    font-size:0.32rem;
    color:#999;
    margin-top:0.053333rem;
}
.shop-bar .shipping-fee{

}
.shop-bar .submit-btn{
    width:2.933333rem;
    height:100%;
    background:#ffd161;
    color:#333;
    font-size:0.426667rem;
    line-height:1.333333rem;
    text-align:center;
}
.choose-item{
    display: flex;
    font-size:0.4rem;
    color:#2f2f2f;
    height:0.933333rem;
    align-items: center;
    padding:0.266667rem 0;
    border-bottom:0.026667rem solid #ddd;
}
.choose-item .item-name{
    flex:1;
    padding-left:0.266667rem;
}
.choose-item .price{
    margin:0 0.666667rem 0 0.133333rem;
}
.choose-item .total{

}
.choose-item .select-content{
    position: relative;
    margin-right:0.213333rem;
    display: flex;
}
.choose-item .minus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/minus.png);    
    background-size:cover;
}
.choose-item .plus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/plus.png);    
    background-size:cover;
}
.choose-item .count{
    font-size:0.4rem;
    color:#2f2f2f;
    width:0.666667rem;
    height:0.666667rem;
    line-height:0.666667rem;
    margin:0 0.053333rem;
    text-align:center;
}
.menu-inner .mask{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background-color: rgba(0,0,0,.7);
}

menu.js

(function(){

    //加载左侧类目
    function initLeftBar(){
        //左侧类目的模板字符串
        var itemTpl='<div class="left-item">'+
                        '<div class="item-text">$getItemContent</div>'+
                    '</div>';
        var itemHtml="";
        var page=0;//当前页
        var isLoading=false;//当前是否处于加载中

        //获取列表数据
        function getList(){
            page++;
            isLoading=true;

            $.get("../json/food.json",function(data){

                var list=data.data.food_spu_tags || [];
                window.food_spu_tags=list;//把数据挂载到window对象上，方便其他模块调用

                list.forEach(function(item,index){
                    var str=itemTpl.replace("$getItemContent",getItemContent(item));
                    var $target=$(str);

                    //将item数据挂载到left-item上面
                    $target.data("itemData",item);

                    $(".left-bar-inner").append($target);
                })

                $(".left-item").first().click();//默认显示第一个tab

                isLoading=false;

                window.shopBar.changeShippingPrice(data.data.poi_info.shipping_fee || 0);//更新价格
            })

            //关于图标的处理
            function getItemContent(data){
                if(data.icon){
                    return '<img class="item-icon" src='+data.icon+'>'+data.name;
                }else{
                    return data.name;
                }
            }
        }

        getList();//默认先请求一次    

        //滚动加载
        window.addEventListener("scroll",function(){
            var clientHeight=document.documentElement.clientHeight;//视窗高度
            var scrollHeight=document.body.scrollHeight;//body滚动过的总长
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;//body滚动过的总长

            var preDis=30;//提前的预值
            if((scrollTop+clientHeight)>=(scrollHeight-preDis)){
        
                //自定义页面，一次最多滚动3页
                if(page<3){
                    if(isLoading) return;
                    getList();            
                }else{
                    $(".loading").text("加载完成");
                }
            }
        });

        //左侧tab点击事件
        $(".menu-inner").on("click",".left-item",function(e){
            var $target=$(e.currentTarget);

            //添加点击样式
            $target.addClass("active");
            $target.siblings().removeClass("active");

            //将数据传给右侧详情列表
            initRightContent($target.data("itemData"));//加载右侧商品
        })
    }

    //加载右侧商品
    function initRightContent(data){
        //右侧商品的模板字符串
        var itemTpl='<div class="menu-item">'+
                        '<img src=$picture class="img">'+
                        '<div class="menu-item-right">'+
                            '<p class="item-title">$name</p>'+
                            '<p class="item-desc">$description</p>'+
                            '<p class="item-zan">$praise_content</p>'+
                            '<p class="item-price">￥$min_price<span class="unit">/$unit</span></p>'+
                        '</div>'+
                        '<div class="select-content">'+
                            '<div class="minus"></div>'+
                            '<div class="count">$chooseCount</div>'+
                            '<div class="plus"></div>'+
                        '</div>'+
                    '</div>';

        $(".right-list-inner").html("");

        var list=data.spus || [];
        list.forEach(function(item,index){
            //默认为0
            if(!item.chooseCount){
                item.chooseCount=0;
            }
            var str=itemTpl
                    .replace("$picture",item.picture)
                    .replace("$name",item.name)
                    .replace("$description",item.description)
                    .replace("$praise_content",item.praise_content)
                    .replace("$min_price",item.min_price)
                    .replace("$unit",item.unit)
                    .replace("$chooseCount",item.chooseCount);
            var $target=$(str);
            $target.data("itemData",item);//把数据挂载在data属性上，方便以后获取
            $(".right-list-inner").append($target);
        });

        //右侧顶部title
        $(".right-title").text(data.name);

        //加号事件
        $(".menu-item").on("click",".plus",function(e){
            var $count=$(e.currentTarget).parent("").find(".count");
            $count.text(parseInt($count.text()||"0")+1);

            //更新挂载的数据
            var $item=$(e.currentTarget).parents(".menu-item").first();
            var itemData=$item.data("itemData");
            itemData.chooseCount++;

            window.shopBar.renderItems();//购物车渲染
        })

        //减号事件
        $(".menu-item").on("click",".minus",function(e){
            var $count=$(e.currentTarget).parent("").find(".count");
            if($count.text()==0) return;

            $count.text(parseInt($count.text()||"0")-1);

            //更新挂载的数据
            var $item=$(e.currentTarget).parents(".menu-item").first();
            var itemData=$item.data("itemData");
            itemData.chooseCount--;

            window.shopBar.renderItems();//购物车渲染
        })
    }        

    //shopbar
    function initShopBar(){
        //shopbar的购物车上部分模板字符串
        var itemTopTpl='<div class="choose-content hide">'+
                            '<div class="content-top">'+
                                '<div class="clear-car">清空购物车</div>'+
                            '</div>'+
                        '</div>';

        //shopbar的购物车下部分模板字符串
        var itemBottomTpl='<div class="bottom-content">'+
                                '<div class="shop-icon">'+
                                    '<div class="dot-num hide"></div>'+
                                '</div>'+
                                '<div class="price-content">'+
                                    '<p class="total-price">￥<span class="total-price-span">0</span></p>'+
                                    '<p class="other-price">另需配送&nbsp;￥<span class="shipping-fee">0</span></p>'+
                                '</div>'+
                                '<div class="submit-btn">去结算</div>'+
                            '</div>';

        var $strTop=$(itemTopTpl);
        var $strBottom=$(itemBottomTpl);

        $(".shop-bar").append($strTop);
        $(".shop-bar").append($strBottom);

        //渲染购物车数据
        function renderItems(){
            $strTop.find(".choose-item").remove();//每次操作之后先全部清空购物车
            var list=window.food_spu_tags || [];
            var totalPrice=0;

            var tpl='<div class="choose-item">'+
                        '<div class="item-name">$name</div>'+
                        '<div class="price">￥<span class="total">$price</span></div>'+
                        '<div class="select-content">'+
                            '<div class="minus"></div>'+
                            '<div class="count">$chooseCount</div>'+
                            '<div class="plus"></div>'+
                        '</div>'+
                    '</div>';

            list.forEach(function(item){
                item.spus.forEach(function(_item){
                    if(_item.chooseCount>0){
                        var price=_item.chooseCount*_item.min_price;
                        var row=tpl.replace("$name",_item.name)
                                   .replace("$price",price)//总价
                                   .replace("$chooseCount",_item.chooseCount);
                        totalPrice+=price;

                        //挂载数据
                        var $row=$(row);
                        $row.data("itemData",_item);
                        $strTop.append($row);
                    }
                })
                window.shopBar.changeAllPrice(totalPrice);//更新总价
                changeDot();//更新红点
            })
        }
        window.shopBar.renderItems=renderItems;//将该方法暴露到全局

        //更新单商品总价
        function changeShippingPrice(str){
            $strBottom.find(".shipping-fee").text(str);
        }
        window.shopBar.changeShippingPrice=changeShippingPrice;

        //更新全商品总价
        function changeAllPrice(str){
            $strBottom.find(".total-price-span").text(str);
        }
        window.shopBar.changeAllPrice=changeAllPrice;

        //购物车里的加号事件
        $strTop.on("click",".plus",function(e){
            var $count=$(e.currentTarget).parent("").find(".count");
            $count.text(parseInt($count.text()||"0")+1);

            //更新挂载的数据
            var $item=$(e.currentTarget).parents(".choose-item").first();
            var itemData=$item.data("itemData");
            itemData.chooseCount++;//更新挂载数据，在列表里也会同步更新

            window.shopBar.renderItems();//购物车渲染    

            //找到当前右侧详情的数据，进行联动
            $(".left-item.active").click();        
        })

        //购物车里的减号事件
        $strTop.on("click",".minus",function(e){
            var $count=$(e.currentTarget).parent("").find(".count");
            if($count.text()==0) return;

            $count.text(parseInt($count.text()||"0")-1);

            //更新挂载的数据
            var $item=$(e.currentTarget).parents(".choose-item").first();
            var itemData=$item.data("itemData");
            itemData.chooseCount--;//更新挂载数据，在列表里也会同步更新

            window.shopBar.renderItems();//购物车渲染    

            //找到当前右侧详情的数据，进行联动
            $(".left-item.active").click();        
        })

        //点击显示或者隐藏购物车
        $(".shop-icon").on("click",function(){
            $(".mask").toggle();
            $strTop.toggle();
        })

        //计算红点中的数量
        function changeDot(){
            var counts=$strTop.find(".count");
            var total=0;
            for(var i=0;i<counts.length;i++){
                total+=parseInt($(counts[i]).text());
            }
            if(total>0){
                $(".dot-num").show().text(total);
            }else{
                $(".dot-num").hide();
            }
        }
    }        

    //暴露出来的方法
    window.shopBar={};

    function init(data){
        initLeftBar();//加载左侧类目
        initShopBar();//加载购物车
    }    
    init();    
    


})();

common.css

/*header-tab*/
.tab-bar{
    font-size:0.426667rem;
    display:flex;
    border-bottom:0.026667rem solid #f0f0f0;
    margin-top:1.706667rem;
}
.tab-bar .tab-item{
    flex:1;
    height:1.2rem;
    line-height:1.2rem;
    position: relative;
    color:#666;
    text-align:center;
    text-decoration: none;
}
.tab-bar .tab-item.active::after{
    content:"";
    display: block;
    position: absolute;
    width:1.6rem;
    height:0.106667rem;
    bottom:0;
    background:#ffd161;/*美团黄*/
    /*设置居中*/
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}

/*menu-inner*/
.menu-inner{
    position: absolute;
    top:2.933333rem;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    overflow:hidden;
}
.menu-inner .left-bar{
    width:2.266667rem;
    background:#efefef;
    overflow:auto;
    height:100%;
    -webkit-overflow-scrolling:touch;/*局部滚动，尤其是移动端ios*/
}
.menu-inner .left-bar-inner{
    padding-bottom:2.266667rem;
}
.menu-inner .left-item{
    font-size:0.373333rem;
    color:#656565;
    text-align:center;
    border-bottom:0.026667rem solid #bfbfbf;
    display: flex;
    justify-content: center;
    height:1.6rem;
}
.menu-inner .left-item.active{
    background:#fff;
}
.menu-inner .item-text{
    text-align:center;
    align-self:center;
}
.menu-inner .item-icon{
    width:0.533333rem;
    height:0.533333rem;
    display: inline-block;
    margin-right:0.16rem;
    vertical-align:-0.106667rem;
}
.menu-inner .right-content{
    flex:1;
    margin-left:0.266667rem;
    height:100%;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;/*触屏滚动*/
}
.menu-inner .right-title{
    font-size:0.346667rem;
    color:#333;
    margin-top:0.266667rem;
    padding-left:0.106667rem;
    border-left:0.053333rem solid #ffd161;
}
.menu-inner .right-list{
    height:100%;
    overflow:auto;/*可滚动*/
}
.menu-inner .right-list-inner{
    font-size:0.426667rem;
    padding-bottom:2.266667rem;
}
.right-list-inner .menu-item{
    display: flex;
    padding:0.666667rem 0;
    border-bottom:0.026667rem solid #f0f0f0;
    position: relative;
}
.right-list-inner .img{
    width:1.653333rem;
    height:1.653333rem;
    margin-right:0.266667rem;
}
.right-list-inner .menu-item-right{
    flex:1;
}
.right-list-inner .item-title{
    font-size:0.426667rem;
    color:#2f2f2f;
}
.right-list-inner .item-desc,
.right-list-inner .item-zan{
    color:#a9a9a9;
    font-size:0.32rem;
    margin-top:0.16rem;
    line-height:0.373333rem;
    padding-right:0.106667rem;
}
.right-list-inner .item-desc{
    line-height:0.453333rem;
}
.right-list-inner .item-price{
    margin-top:0.266667rem;
    color:#fe4d3d;
    font-size:0.48rem;
}
.right-list-inner .unit{
    color:#a9a9a9;
    font-size:0.32rem;
}
.right-list-inner .select-content{
    position: absolute;
    right:0.24rem;
    bottom:0.56rem;
    display: flex;
}
.right-list-inner .minus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/minus.png);    
    background-size:cover;
}
.right-list-inner .count{
    font-size:0.4rem;
    color:#2f2f2f;
    width:0.666667rem;
    height:0.666667rem;
    line-height:0.666667rem;
    margin:0 0.053333rem;
    text-align:center;
}
.right-list-inner .plus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/plus.png);    
    background-size:cover;
}

/*shopbar*/
.shop-bar{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:99;
}
.shop-bar .choose-content{
    background:#fff;
}
.shop-bar .content-top{
    height:0.933333rem;
    background-color:#f4f4f4;
    font-size:0.293333rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.shop-bar .clear-car{
    margin:0 0.133333rem 0 0.266667rem;
    position: relative;
}
.shop-bar .clear-car::after{
    content:"";
    width:0.346667rem;
    height:0.346667rem;
    display: block;
    background-image:url(images/clear.jpeg);
    background-size:cover;
    position: absolute;
    top:-0.026667rem;
    left:-0.373333rem;
}
.shop-bar .bottom-content{
    height:1.333333rem;
    display: flex;
    background:rgba(51,51,51,.9);
}
.shop-bar .shop-icon{
    width:1.466667rem;
    height:1.466667rem;
    background-image:url(images/shop-icon.png);
    background-size:cover;
    margin-top:-0.4rem;
    margin-left:0.32rem;
    position: relative;
}
.shop-bar .dot-num{
    position: absolute;
    background-color: #fb4e44;
    width:0.4rem;
    height:0.4rem;
    font-size:0.32rem;
    color:#fff;
    border:0.026667rem solid #fff;
    border-radius:50%;
    right:0;
    top:0.053333rem;
    text-align: center;
    line-height:0.4rem;
}
.shop-bar .price-content{
    flex:1;
    padding-top:0.213333rem;
    padding-left:0.186667rem;
}
.shop-bar .total-price{
    font-size:0.533333rem;
    color:#fff;
}
.shop-bar .total-price-span{

}
.shop-bar .other-price{
    font-size:0.32rem;
    color:#999;
    margin-top:0.053333rem;
}
.shop-bar .shipping-fee{

}
.shop-bar .submit-btn{
    width:2.933333rem;
    height:100%;
    background:#ffd161;
    color:#333;
    font-size:0.426667rem;
    line-height:1.333333rem;
    text-align:center;
}
.choose-item{
    display: flex;
    font-size:0.4rem;
    color:#2f2f2f;
    height:0.933333rem;
    align-items: center;
    padding:0.266667rem 0;
    border-bottom:0.026667rem solid #ddd;
}
.choose-item .item-name{
    flex:1;
    padding-left:0.266667rem;
}
.choose-item .price{
    margin:0 0.666667rem 0 0.133333rem;
}
.choose-item .total{

}
.choose-item .select-content{
    position: relative;
    margin-right:0.213333rem;
    display: flex;
}
.choose-item .minus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/minus.png);    
    background-size:cover;
}
.choose-item .plus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/plus.png);    
    background-size:cover;
}
.choose-item .count{
    font-size:0.4rem;
    color:#2f2f2f;
    width:0.666667rem;
    height:0.666667rem;
    line-height:0.666667rem;
    margin:0 0.053333rem;
    text-align:center;
}
.menu-inner .mask{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background-color: rgba(0,0,0,.7);
}

common.js

(function(){

    //加载底部菜单
    function initBottomBar(){
        //底部菜单的模板字符串
        var itemTpl='<a class="$key btn-item" href="../$key/$key.html">'+
                        '<div class="tab-icon"></div>'+
                        '<div class="btn-name">$text</div>'+
                    '</a>';
        var items=[{
            key:"index",
            text:"首页"
        },{
            key:"order",
            text:"订单"
        },{
            key:"my",
            text:"我的"
        }];

        var str="";
        items.forEach(function(item){
            str+=itemTpl.replace(/\$key/g,item.key)//正则解决全局替换的问题
                   .replace("$text",item.text);
        });

        $(".bottom-bar").append(str);

        //判断当前属于哪个页面
        var arr=window.location.pathname.split("/");
        var page=arr[arr.length-1].replace(".html","");//最后一个元素，去掉.html
        page=page==""?"index":page;//默认显示首页
        $("a.btn-item").removeClass("active");
        $("a."+page).addClass("active");

    }    


    //加载menu页的头部
    function initTabBar(){
        //menu页的模板字符串
        var itemTpl='<a class="$key tab-item" href="../$key/$key.html">'+
                        '$text'+
                    '</a>';
        var items=[{
            key:"menu",
            text:"点菜"
        },{
            key:"comment",
            text:"评价"
        },{
            key:"restaurant",
            text:"商家"
        }];

        var str="";
        items.forEach(function(item){
            str+=itemTpl.replace(/\$key/g,item.key)//正则解决全局替换的问题
                   .replace("$text",item.text);
        });

        $(".tab-bar").append(str);

        //判断当前属于哪个页面
        var arr=window.location.pathname.split("/");
        var page=arr[arr.length-1].replace(".html","");//最后一个元素，去掉.html
        $("a."+page).addClass("active");

    }

    function init(){
        initBottomBar();//加载底部菜单
        initTabBar();//加载menu页的头部
    }    
    init();    
    
})();

food.json

 太多了放不上来，大家自己琢磨吧==

猜你喜欢

转载自www.cnblogs.com/chenyingying0/p/12549166.html
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022