仿美团页面功能实现

新闻公告

仿美团页面功能实现

发布时间：2020-03-24 00:00:00

效果图

首先是目录结构

menu.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>menutitle><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根元素的fontSizevar docEl=document.documentElement;function setRem(){// 这个10不是固定的，只是计算出来的rem要和cssrem插件setting中设置的37.5保持一致// iphone6设备宽度是375，因此基准值刚好是10var 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的时候），重新设置remif(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=''+
                        '$getItemContent'+
                    '';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();//默认显示第一个tabisLoading=false;

                window.shopBar.changeShippingPrice(data.data.poi_info.shipping_fee || 0);//更新价格            })//关于图标的处理function getItemContent(data){if(data.icon){return ''+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=''+
                        ''+
                        ''+
                            '$name'+
                            '$description'+
                            '$praise_content'+
                            '￥$min_price/$unit'+
                        ''+
                        ''+
                            ''+
                            '$chooseCount'+
                            ''+
                        ''+
                    '';

        $(".right-list-inner").html("");var list=data.spus || [];
        list.forEach(function(item,index){//默认为0if(!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();//购物车渲染        })
    }        //shopbarfunction initShopBar(){//shopbar的购物车上部分模板字符串var itemTopTpl=''+
                            ''+
                                '清空购物车'+
                            ''+
                        '';//shopbar的购物车下部分模板字符串var itemBottomTpl=''+
                                ''+
                                    ''+
                                ''+
                                ''+
                                    '￥0'+
                                    '另需配送 ￥0'+
                                ''+
                                '去结算'+
                            '';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=''+
                        '$name'+
                        '￥$price'+
                        ''+
                            ''+
                            '$chooseCount'+
                            ''+
                        ''+
                    '';

            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=''+
                        ''+
                        '$text'+
                    '';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","");//最后一个元素，去掉.htmlpage=page==""?"index":page;//默认显示首页$("a.btn-item").removeClass("active");
        $("a."+page).addClass("active");

    }    //加载menu页的头部function initTabBar(){//menu页的模板字符串var itemTpl=''+
                        '$text'+
                    '';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

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

关于我们

新闻公告

仿美团页面功能实现

翼通云产品

解决方案

帮助与支持

其他链接

联系我们