web前端入門到實戰：仿美團詳情頁與購物車源碼-首頁實現

原創 前端向南 2020-04-07 18:56

效果圖

web前端入門到實戰：仿美團詳情頁與購物車源碼-首頁實現

首先是index.html

<!DOCTYPE html>
<html>
<head>
    <title>首頁</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <script type="text/javascript"> (function() { var docEl = document.documentElement; function setRemUnit() { // 獲取到rem的基準值
            var rem = docEl.clientWidth / 10; // 動態設置html根元素的font-size
 docEl.style.fontSize = rem + 'px';
        }
        setRemUnit(); // 窗口大小變化時 觸發
 window.addEventListener('resize', setRemUnit); // 窗口出現在當前屏幕時 （有瀏覽器兼容性）
 window.addEventListener('pageshow', function(e) { if (e.persisted) {
                setRemUnit();
            }
        });
    })(); </script>
    <link rel="stylesheet" type="text/css" href="../lib/reset.css"><!-- 樣式重置 -->
    <link rel="stylesheet" type="text/css" href="./searchBar/searchBar.css"><!-- 搜索框 -->
    <link rel="stylesheet" type="text/css" href="./category/category.css"><!-- 美食分類 -->
    <link rel="stylesheet" type="text/css" href="./contentList/contentList.css"><!-- 美食列表 -->
    <link rel="stylesheet" type="text/css" href="./starScore/starScore.css"><!-- 星級評分 -->
    <link rel="stylesheet" type="text/css" href="../common/bottomBar/bottomBar.css"><!-- 底部菜單欄 -->
    <link rel="stylesheet" type="text/css" href="./header/header.css"><!-- 頭部 -->
</head>

<body>
    <!--頭部開始-->
    <div class="header">
        <div class="search-bar">
            <div class="bar-location">
                <div class="location-icon"></div>
                <div class="location-text">鄭州市</div>
            </div>
            <div class="search-btn">
                <p class="place-holder">雞翅</p>
            </div>
        </div>
        <img class="header-img" src="https://app.nihaoshijie.com.cn/upload/bannertemp.e8a6fa63.jpg">
    </div>
        <!--頭部結束-->
        <!--類目結束-->
        <div class="category-content clearfix"></div>
        <!--類目結束-->
        <!--商家列表開始-->
        <div class="list-content">
            <h4 class="list-title">
            <span class="title-line"></span>
            <span>附近商家</span>
            <span class="title-line"></span>
        </h4>
            <div class="list-wrap"></div>
            <div class="loading">加載中</div>
        </div>
        <!--商家列表結束-->
        <!--底部欄開始-->
        <div class="bottom-bar"></div>
        <!--底部欄結束-->
        <script type="text/javascript" src="../lib/jquery.min.js"></script>
        <script type="text/javascript" src="./starScore/starScore.js"></script><!-- 星級評分 -->
        <script type="text/javascript" src="./category/category.js"></script><!-- 美食分類 -->
        <script type="text/javascript" src="../common/bottomBar/bottomBar.js"></script><!-- 底部菜單欄 -->
        <script type="text/javascript" src="./contentList/contentList.js"></script><!-- 美食列表 -->
</body>
</html>

接下來是用到的css文件

樣式重置reset.css

專門建立的學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block;
} body { line-height: 1;
} ol, ul { list-style: none;
} blockquote, q { quotes: none;
} blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;
} table { border-collapse: collapse; border-spacing: 0;
} .clearfix::after { content: ' '; visibility: hidden; display: block; height: 0; clear: both;
} .one-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
} .hide { display: none;
}

搜索框 searchBar.css

.search-bar { width: 100%; height: 1.066667rem; position: absolute; display: flex; flex-direction: row; align-items: center; justify-content: center; padding-top: 0.213333rem;

} .search-bar .bar-location { margin-right: 0.533333rem; border-radius: 0.346667rem; background-color: rgba(0,0,0,0.33); width: 2.453333rem; height: 0.746667rem;
} .search-bar .location-icon { display: inline-block; width: 0.4rem; height: 0.533333rem; vertical-align: 0.213333rem; margin-left: 0.16rem; background-image: url('../img/locationIcon.png'); background-size: cover;
} .search-bar .location-text { position: relative; display: inline-block; font-size: 0.373333rem; color: #fff; vertical-align: 0.32rem; margin-left: -0.08rem;
} .search-bar .location-text::after { content: ' '; display: block; width: 0.373333rem; height: 0.373333rem; background-image: url('../img/arrowIcon.png'); background-size: cover; position: absolute; right: -0.4rem; top: -0.026667rem;
} .search-bar .search-btn { position: relative; width: 4.533333rem; height: 0.8rem; background-color: #fff; border-radius: 0.533333rem;
} .search-bar .search-btn::before { content: ' '; display: block; width: 0.373333rem; height: 0.373333rem; background-image: url('../img/searchIcon.png'); background-size: cover; top: 0.213333rem; left: 0.266667rem; position: absolute;
} .search-bar .place-holder { color: #a9a9a9; font-size: 0.373333rem; height: 100%; line-height: 0.8rem; margin-left: 0.746667rem;
}

美食分類 category.css

.category-content { padding-bottom: 0.266667rem;

} .category-content .category-item { float: left; width: 25%; padding-top: 0.373333rem; font-size: 0.346667rem; display: flex; flex-direction: column; align-items: center;

} .category-content .item-icon { width: 1.253333rem;
} .category-content .item-name { margin-top: 0.373333rem;
}

美食列表 contentList.css

.list-content { overflow: hidden; padding-bottom: 1.333333rem;
} .list-content .list-title { text-align: center; font-size: 0.426667rem; margin-top: 0.373333rem; margin-bottom: 0.133333rem;
} .list-content .title-line { display: inline-block; border-bottom: 0.026667rem solid #949494; height: 0.026667rem; width: 0.8rem; margin-left: 0.106667rem; margin-right: 0.106667rem; margin-bottom: 0.106667rem;
} .loading { padding-bottom: 0.266667rem; padding-top: 0.266667rem; font-size: 0.426667rem; text-align: center; color: #ccc;
} .r-item-content { display: flex; padding-top: 0.4rem; padding-bottom: 0.4rem; margin-left: 0.266667rem; margin-right: 0.266667rem; color: #656565; position: relative;
} .r-item-content .item-img { width: 2.293333rem; height: 1.733333rem; border: 0.026667rem solid #e4e4e4;

} .r-item-content .item-info-content { flex: 1; margin-left: 0.186667rem; overflow: hidden;
} .r-item-content .brand { position: absolute; left: 0.026667rem; top: 0.426667rem; font-size: 0.32rem; padding: 0.053333rem; color: #fff;
} .r-item-content .brand-pin { background-color: #ffa627;
} .r-item-content .brand-xin { background-color: #21c56c;
} .r-item-content .item-title { margin-top: 0.08rem; font-size: 0.426667rem; font-weight: 500; color: #333;
} .r-item-content .item-desc { margin-top: 0.346667rem; font-size: 0.32rem;
} .r-item-content .item-count { float: left; margin-left: 0.133333rem;
} .r-item-content .item-time { float: right;
} .r-item-content .item-distance { float: right;
} .r-item-content .item-score { float: left;
} .r-item-content .item-price { margin-top: 0.266667rem; font-size: 0.32rem; height: 0.64rem;
} .r-item-content .other-info { color: #898989; margin-top: 0.186667rem; font-size: 0.32rem; display: flex;
} .r-item-content .other-tag { width: 0.373333rem; height: 0.373333rem;
} .other-content { margin-left: 0.08rem; height: 0.373333rem; width: 6.133333rem; margin-top: 0.026667rem;
}

星級評分 starScore.css

.star-score .star { width: 0.266667rem; height: 0.266667rem; float: left; background-size: cover;
} .star-score .fullstar { background-image: url('./img/fullstar.png');
} .star-score .halfstar { background-image: url('./img/halfstar.png');
} .star-score .nullstar { background-image: url('./img/gray-star.png');
}

底部菜單欄 bottomBar.css

.bottom-bar { position: fixed; bottom: 0; width: 100%; height: 1.333333rem; display: flex; border-top: 1px solid #b6b6b6; background-color: rgba(246,246,246,0.95);
} .bottom-bar .btn-item { flex: 1; display: flex; font-size: 0.293333rem; flex-direction: column; align-items: center; justify-content: center; color: #999;
} .bottom-bar .tab-icon { margin-bottom: 0.106667rem; width: 0.666667rem; height: 0.666667rem; background-size: cover;
} .bottom-bar .index.btn-item .tab-icon { background-image: url('./img/homeIcon.png');
} .bottom-bar .my.btn-item .tab-icon { background-image: url('./img/myIcon.png');
} .bottom-bar .order.btn-item .tab-icon { background-image: url('./img/orderIcon.png');
} .bottom-bar .btn-item.active { color: #000;
} .bottom-bar .index.btn-item.active .tab-icon { background-image: url('./img/homeIconActive.png');
} .bottom-bar .my.btn-item.active .tab-icon { background-image: url('./img/myIconActive.png');
} .bottom-bar .order.btn-item.active .tab-icon { background-image: url('./img/orderIconActive.png');
}

頭部 header.css

.header { position: relative;
} .header .header-img { width: 100%; height: 4.746667rem;
}

接下來是js文件，乖乖引入jquery不用說

星級評分 starScore.js

(function(){ // 得分模版字符串
    var itemTmpl = '<div class="star-score">$starstr</div>'; function _getStars(){ var _score = this.score.toString(); //4.4
        var scoreArray = _score.split('.'); // 滿星
        var fullstar = parseInt(scoreArray[0]); // 半星
        var halfstar = parseInt(scoreArray[1]) >=5 ? 1: 0; // 0星
        var nullstar = 5 - fullstar - halfstar; var starstr = ''; for (var i = 0 ; i < fullstar ; i++) {
            starstr += '<div class="star fullstar"></div>' } for (var j = 0 ; j < halfstar ; j++) {
            starstr += '<div class="star halfstar"></div>' } for (var k = 0 ; k < nullstar ; k++) {
            starstr += '<div class="star nullstar"></div>' } return itemTmpl.replace('$starstr',starstr);

    }

    window.StarScore = function(score){ this.score = score || ''; this.getStars = _getStars;
    }

})();

美食分類 category.js

(function(){ // 類目的模版字符串
    var itemTmpl = '<div class="category-item">'+
                        '<img class="item-icon" src=$url />'+
                        '<p class="item-name">$name</p>'+
                    '</div>'; /** 
    *  渲染category元素
    * param */
    function initCategory(){ // 獲取category的數據
 $.get('../json/head.json', function(data){
            console.log(data); var list = data.data.primary_filter.splice(0,8);

            list.forEach(function(item, index){ var str = itemTmpl
                .replace('$url',item.url)
                .replace('$name',item.name);

                $('.category-content').append($(str));
            });
        });
    } /** 
    *  綁定item的click事件
    * param */
    function addClick(){
        $('.category-content').on('click','.category-item', function(){
            alert(1);
        });
    } function init() {
        initCategory();
        addClick();
    }

    init();
})();

底部菜單欄 bottomBar.js

(function(){ var itemTmpl = '<a class="$key btn-item" href="../$key/$key.html">'+
                      '<div class="tab-icon"></div>'+
                      '<div class="btn-name">$text</div>'+
                   '</a>'

    function init(){ var items = [{
            key: 'index',
            text: '首頁' },{
            key: 'order',
            text: '訂單' },{
            key: 'my',
            text: '我的' }]; var str = '';

        items.forEach(function(item){
            str += itemTmpl.replace(/\$key/g,item.key)
                            .replace('$text',item.text)
        });

        $('.bottom-bar').append($(str)); // 找到當前頁面的url來確定key值
        var arr = window.location.pathname.split('/'); var page = arr[arr.length-1].replace('.html',''); // 將當前的頁面對應的key值的a元素設置active的class
        $('a.'+page).addClass('active');
    }

    init();

})();

美食列表

(function(){ // 商家詳情模版字符串
    var itemTmpl = '<div class="r-item-content">'+
                        '<img class="item-img" src=$pic_url />'+
                        '$brand'+
                        '<div class="item-info-content">'+
                            '<p class="item-title">$name</p>'+
                            '<div class="item-desc clearfix">'+
                                '<div class="item-score">$wm_poi_score</div>'+
                                '<div class="item-count">月售$monthNum</div>'+
                                '<div class="item-distance">&nbsp;$distance</div>'+
                                '<div class="item-time">$mt_delivery_time&nbsp;|</div>'+
                            '</div>'+
                            '<div class="item-price">'+
                                '<div class="item-pre-price">$min_price_tip</div>'+
                            '</div>'+
                            '<div class="item-others">'+
                                '$others'+
                            '</div>'+
                        '</div>'+
                    '</div>'; var page = 0; var isLoading = false; /** 
    *  獲取商家列表數據
    *  param */
    function getList(){
        page++;
        isLoading = true;
        $.get('../json/homelist.json', function(data){

            console.log(data); var list = data.data.poilist || [];

            initContentList(list);
            isLoading = false;

        });
    } /** 
    *  渲染是否時新到熱門品牌標籤
    *  param {} data */
    function getBrand(data){ if (data.brand_type) { return '<div class="brand brand-pin">品牌</div>';
        } else { return '<div class="brand brand-xin">新到</div>';
        }
    } /** 
    *  渲染月售
    *  param {} data */
    function getMonthNum(data){ var num = data.month_sale_num; // 大於999採用999+
        if (num > 999) { return '999+';
        } return num
    } /** 
    *  渲染商家活動
    *  param {} data */
    function getOthers(data){ var array = data.discounts2; var str = '';

        array.forEach(function(item, index){ // 內部的商家活動模版字符串
            var _str = '<div class="other-info">'+
                           '<img src=$icon_url class="other-tag" />'+
                           '<p class="other-content one-line">$info</p>'+
                        '</div>'; // 模版字符串替換數據
            _str = _str.replace('$icon_url',item.icon_url)
                        .replace('$info', item.info); // 字符串拼接
            str = str + _str;
        }) return str;
    } /** 
    *  渲染列表數據
    *  param [] */
    function initContentList(list){
        list.forEach(function(item, index){ var str = itemTmpl
                      .replace('$pic_url',item.pic_url)
                      .replace('$name',item.name)
                      .replace('$distance',item.distance)
                      .replace('$min_price_tip',item.min_price_tip)
                      .replace('$mt_delivery_time',item.mt_delivery_time)

                      .replace('$brand',getBrand(item))

                      .replace('$monthNum',getMonthNum(item))

                      .replace('$others',getOthers(item))

                      .replace('$wm_poi_score', new StarScore(item.wm_poi_score).getStars())

            $('.list-wrap').append($(str));
        })

    } function addEvent(){
        window.addEventListener('scroll',function(){ var clientHeight = document.documentElement.clientHeight; var scrollHeight = document.body.scrollHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var proDis = 30; if ((scrollTop + clientHeight) >= (scrollHeight-proDis)) { // 最多滾動加載3頁
                if (page < 3) { // 在發送ajax請求時避免觸發多次滾動加載
                    if (isLoading) { return;
                    }
                    getList();
                }else {
                    $('.loading').text('加載完成');
                }

            }
        });
    } function init() {
        getList();
        addEvent();
    }

    init();
})();
專門建立的學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）

首頁搞定！

web前端入門到實戰：仿美團詳情頁與購物車源碼-首頁實現

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

html+css 選項卡

  <style type=text/css>td {   font-size: 12px;  color: #000000;  line-heig

bluelazyboy 2020-07-08 12:23:28

position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）

絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie

ddx2019 2020-07-08 11:55:42

css每日一報（自己積累平時寫法）

1、pc端共用的樣式： *{padding:0px;margin:0px;outline:0 none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-s

空手走-web 2020-07-08 11:54:55

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

原生JS實現樹狀結構列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始數據結構  原始數據

wendZzz 2020-07-08 11:27:37

web前端複習第七課

                                           二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

思丰百年 2020-07-08 10:46:31

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

網頁設計中常見的兼容性問題

常見兼容性問題 1、png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8. 2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的 *{margin:0;padding:0;}來統一。 3、IE6

LFWMP 2020-07-08 10:28:29

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

幾個簡單的css動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi

哀木i 2020-07-08 08:40:28

css消息數量，圓圈數字，購物車數量。

  html:  <a href="index.html" class="nav">未讀留言<div class="nav-counter nav-counter-blue">4</div></a> css:  .nav{

blueBings 2020-07-08 07:33:49

一次完整的HTTP服務過程（再整理）

重溫一下計算機網絡的重要知識 例如：當我們在web瀏覽器的地址欄中輸入：www.baidu.com並回車，具體發生了什麼。 第一層理解 對網址進行DNS域名解析，得到對應的公網IP地址 根據這個IP，找到對應的服務器，發起T

wennianzhu 2020-07-08 07:29:39

Js and Css

<div style="border: 1px; border-style: solid; border-collapse: collapse; border-color: Gray" mce_style="border: 1px; bo

海会圣贤 2020-07-08 06:54:55

window print 設置字體大小

<style   type="text/css">     @media   print   {     body   {   font-size:   12px}     }     @media   screen   {     bo

海会圣贤 2020-07-08 06:54:55