json有问题

来源：2-5 首页-类目（1）

小丸子不吃丸子

2020-12-08 10:22:24

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0，maximum-scale=1.0,user-scalable=0">
    <title>首页</title>
    <script>
        //用rem 动态生成fontSize的脚本
        //设定一个匿名函数
        (function(){
            // 获取dom的document元素
            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);
            //d当用户浏览网页时触发
            window.addEventListener('pageshow',function(e){
                //当浏览器被激活
                if(e.persisted){
                    setRemUnit();
                }
            });
        })();
    </script>
    <link rel="stylesheet" href="../lib/reset.css">
    <link rel="stylesheet" href="./header.css" >
    <link rel="stylesheet" href="searchbar/searchbar.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 src="http://img.mukewang.com/climg/5d590b3f0001863804300245.jpg" class="header-img" >
    </div>
    
    
    <div class="category-content">

    </div>
    
    <script type="text/javascript" src="../lib/jquery.min.js"></script>
    <script type="text/javascript" src="../json/head.json"></script>
</body>
</html>

searchbar.css

.search-bar{
    width:100%;
    height:1rem;
    position: absolute;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 0.213333rem;
}
.search-bar .bar-location{
    margin-right: 0.5rem;
    border-radius: 0.325rem;
    background-color: rgba(0,0,0,.33);
    width: 2.3rem;
    height: 0.7rem;
}
.search-bar .location-icon{
    /* div横着布局 */
    display: inline-block;
    width: 0.375rem;
    height: 0.5rem;
    vertical-align: 0.3rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    background-image: url('../img/locationIcon.png');
    background-size: cover;
}
.search-bar .location-text{
    position: relative;
    display: inline-block;
    font-size: 0.325rem;
    color:#fff;
    vertical-align: 0.425rem;
    margin-left: -0.2rem;
}
.search-bar .search-btn{
    position: relative;
    width: 4.25rem;
    height:0.75rem;
    background-color: #fff;
    border-radius: 0.5rem;
}
.search-bar .search-btn::before {
    content:'';
    display:block;
    width: 0.35rem;
    height: 0.35rem;
    background-image: url('../img/searchIcon.png');
    background-size: cover;
    top: 0.175rem;
    left: 0.25rem;
    position: absolute;
}
.search-bar .place-holder{
    color:#a9a9a9;
    font-size: 0.35rem;
    height:100%;
    line-height: 0.75rem;
    margin-left: 0.75rem;

}

category.js
(function(){
    var itemTmpl='<div class="category-item">'+
                    '<img class="item-icon" src=$url />'+
                    '<p class="item-name">$name</p>'+
                    '</div>';

    function initCate(){
    //获取categroy数据
        $.get('../json/head.json',function(data){
        console.log(data);
        })
    }
    function init(){
        initCate();
        }
    init();
})();

在这里输入代码，可通过选择【代码语言】突出显示