老师帮我看下还需要改进么。总觉得有点麻烦

老师帮我看下还需要改进么。总觉得有点麻烦

<!--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

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕久久 2020-06-04 10:29:21

同学你好,老师将源代码中的部分代码复制到你的代码里后,发现滚动到底部元素后,元素内容加载不出来,如下:

http://img1.sycdn.imooc.com//climg/5ed85ba909d663d905540171.jpg

原因是源代码中滚动到该元素后,触发的是id + '-loadItem'事件:

http://img1.sycdn.imooc.com//climg/5ed85bc009a982d506790516.jpg

而同学监听的是id + '-loadItems':

http://img1.sycdn.imooc.com//climg/5ed85bc70921982408390247.jpg

将事件改成一样的就可以正确加载出来内容了,如下:

http://img1.sycdn.imooc.com//climg/5ed85bcd09dfb3dc07290233.jpg

出现这个问题,可能是同学使用的源代码和老师的不一样,同学那里应该是可以正常加载出来的,所以建议同学下次将代码粘贴完全,这样方便老师快速、准确的为你解答问题。

这样写就可以,不需要优化,同学只要能够明白每一步的含义,了解这种编程思想,就非常棒。另外代码不止一种实现方式,同学也可以不使用这种封装的方式,只要能实现功能就是可以的。

祝学习愉快!

好帮手慕久久 2020-06-03 15:10:54

同学你好,由于代码中lazyLoad.lazyUntil和floor未定义,所以测不出效果。建议同学将所有的代码都粘贴出来,以方便老师测试。

祝学习愉快!

  • 提问者 vivi_li #1
    用的老师源代码的
    2020-06-03 23:59:32
提问者 vivi_li 2020-06-03 12:16:45

/*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 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师