老师帮我看下还需要改进么。总觉得有点麻烦
<!--consumer-->
<div class="consumer">
<div class="container">
<img src="img/loading2.gif">
</div>
</div>
<!--help-->
<div class="help">
<img src="img/loading2.gif">
</div>
//consumer
var consumer = {};
consumer.Data = [{
title: '消费者保障',
items: [
'保障范围',
'退货退款流程',
'服务中心',
'更多特色服务'
]
}, {
title: '新手上路',
items: [
'新手专区',
'消费警示',
'交易安全',
'24小时在线帮助',
'免费开店'
]
}, {
title: '付款方式',
items: [
'快捷支付',
'信用卡',
'余额包',
'蜜蜂花啊',
'货到付款'
]
}, {
title: '慕淘特色',
items: [
'手机慕淘',
'慕淘信',
'大众评审',
'B格指南'
]
}];
consumer.$consumer = $(".consumer");
//是否出现在可视区域
consumer.isVisible = function ($elem) {
//页面可视区域的高度加页面滚动高度大于元素上边沿距离顶部高度时,元素位于可视区域之外---下边界 底部只需判断一次
return (floor.$win.height() + floor.$win.scrollTop() > $elem.offset().top);
}
consumer.timeToShow = function () {
consumer.$consumer.each(function (index, ele) {
if (consumer.isVisible($(ele))) {
floor.$doc.trigger("consumer-show", [index, ele]);
}
})
}
consumer.bulidConsumer = function (data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<div class="consumer-group">' +
'<span class="consumer-group-title">' + data[i].title + '</span>' +
'<div class="consumer-group-detail">';
for (var j = 0; j < data[i].items.length; j++) {
html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>'
}
html += '</div></div>'
}
html = '<div class="container">' + html + '</div>'
return html;
}
//页面滚动以及改变可视区域范围均会触发该事件
floor.$win.on('scroll resize', consumer.showFloor = function () {
//每次滑动之后先清理定时器
clearTimeout(consumer.consumerTimer);
//执行定时器
consumer.consumerTimer = setTimeout(consumer.timeToShow, 250);
});
floor.$doc.on('consumer-loadItems', function (e, index, elem, success) {
//按需加载
var html = consumer.bulidConsumer(consumer.Data),
$elem = $(elem);
success();
setTimeout(function () {
console.log(1)
$elem.html(html);
}, 1000)
})
floor.$doc.on('consumer-itemsLoaded', function () {
floor.$win.off('scroll resize', consumer.showFloor);
})
//调用
lazyLoad.lazyUntil({
$container: floor.$doc,
totalItemNum: consumer.$consumer.length,
triggerEvent: 'consumer-show',
id: 'consumer'
})
consumer.timeToShow(consumer.$consumer);
//help
var help = {};
help.$help = $('.help');
help.Data = {
"group": ['关于慕淘', '合作伙伴', '营销中心', '廉正举报', '联系客服', '开放平台', '诚征英才', '联系我们'],
"copyright": '@2014 imooc.com All Right Reserved'
}
help.timeToShow = function () {
help.$help.each(function (index, ele) {
if (consumer.isVisible($(ele))) {
floor.$doc.trigger("help-show", [index, ele]);
}
})
}
help.bulidHelp= function (data) {
var html = '';
for (var i = 0; i < data['group'].length; i++) {
html += '<a href="###" target="_blank" class="link">' + data.group[i] + '</a>';
}
html='<p class="help-group">'+html+'</p><p class="help-copyright">'+data.copyright+'</p>';
return html;
}
// 页面滚动以及改变可视区域范围均会触发该事件
floor.$win.on('scroll resize', help.showFloor = function () {
//每次滑动之后先清理定时器
clearTimeout(help.helpTimer);
//执行定时器
help.helpTimer = setTimeout(help.timeToShow, 250);
});
floor.$doc.on('help-loadItems', function (e, index, elem, success) {
//按需加载
var html = help.bulidHelp(help.Data),
$elem = $(elem);
success();
setTimeout(function () {
$elem.html(html);
}, 1000)
})
floor.$doc.on('help-itemsLoaded', function () {
floor.$win.off('scroll resize', help.showFloor);
})
//调用
lazyLoad.lazyUntil({
$container: floor.$doc,
totalItemNum: help.$help.length,
triggerEvent: 'help-show',
id: 'help'
})
consumer.timeToShow(help.$help);
正在回答 回答被采纳积分+1
同学你好,老师将源代码中的部分代码复制到你的代码里后,发现滚动到底部元素后,元素内容加载不出来,如下:
原因是源代码中滚动到该元素后,触发的是id + '-loadItem'事件:
而同学监听的是id + '-loadItems':
将事件改成一样的就可以正确加载出来内容了,如下:
出现这个问题,可能是同学使用的源代码和老师的不一样,同学那里应该是可以正常加载出来的,所以建议同学下次将代码粘贴完全,这样方便老师快速、准确的为你解答问题。
这样写就可以,不需要优化,同学只要能够明白每一步的含义,了解这种编程思想,就非常棒。另外代码不止一种实现方式,同学也可以不使用这种封装的方式,只要能实现功能就是可以的。
祝学习愉快!
/*consumer*/
.consumer{
text-align: center;
height: 138px;
z-index: 2;
position: relative;
/*line-height: 138px;*/
}
.consumer .container{
border-top: 1px solid #d9dde1;
}
.consumer-group{
display: inline-block;
width: 280px;
padding-left: 20px;
float: left;
text-align: left;
}
.consumer-group-title{
display: inline-block;
font-size: 16px;
color: #07111b;
margin-top: 35px;
}
.consumer-group-detail{
margin-top: 15px;
/*line-height: 40px;*/
}
.consumer-group-detail a{
display: inline-block;
color: #93999f;
margin-right: 20px;
margin-bottom: 10px;
}
/*help*/
.help{
background-color: #f3f5f7;
height: 100px;
text-align: center;
/*z-index: 2;*/
/*position: relative;*/
}
.help p{
text-align: center;
color: #787d82;
}
.help-group{
padding-top: 33px;
}
.help-group .link{
color: #787d82;
margin-right: 15px;
}
.help-group a.link:hover{
color: #07111b!important;
}
.help-copyright{
padding-top: 14px;
}
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星