老师我不知道是什么问题,麻烦您看一下???
来源：2-8 首页-商家列表（2）
慕斯卡8226687
2020-03-04 02:56:08
//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">
<link rel="stylesheet" type="text/css" href="./lib/reset.css">
<link rel="stylesheet" type="text/css" href="./header/header.css">
<link rel="stylesheet" type="text/css" href="./searchBar/searchBar.css">
<link rel="stylesheet" type="text/css" href="./category/category.css">
<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>
</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="https://app.nihaoshijie.com.cn/upload/bannertemp.e8a6fa63.jpg" class="header-img">
</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>
<!-- 商家列表结束 -->
<script type="text/javascript " src="./lib/jquery.min.js"></script>
<script type="text/javascript " src="./category/category.js"></script>
<script type="text/javascript " src="./contentList/contentList.js"></script>
</body>
</html>
//contentlist.js
(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"> $distance</div>'+
'<div class="item-time">$mt_delivery_time |</div>'+
'</div>'+
'<div class="item-price">'+
'<div class="item-pre-price">$min_price_tip</div>'+
'</div>'+
'<div class="item-others">'+
'$others'+
'</div>'+
'</div>'+
'</div>';
/*
* 获取商家列表
* param
*/
function getList(){
$.get('../json/homelist.json',function(data){
console.log (data);
var list = data.data.poilist || [];
initContentList(list);
});
}
/*
* 渲染列表数据
* param【】
*/
function initContentList(list){
list.forEach(function(item, index){
var str = itemTmpl;
$('list-wrap').append($(str));
})
}
function init() {
getList();
}
init();
})();
1回答
-
好帮手慕慕子
2020-03-04
同学你好， 因为模板字符串itemTmpl中的$pic_url等内容还没有使用真正的数据进行替换，无法访问，所以会出现报错，建议：同学不要着急，继续往后听一听课程，后面老师会继续讲解，如何将对应的字符串替换成数据的， 如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题