require.js 基础......
标签:
JavaScript
main.js
require.config({
paths: {
/*这个好像 var list = require("jquery")*/
jquery:'../../package/jquery',
/*这个好像 var list = require("list")*/
list:'./list',
plume:'./plume'
}
});
/*这个好像 调用list.methods*/
require(['jquery','list','plume'],function (jquery, list, plume) {
$(function () {
list.getInit();
plume.main($(".plume-top"),"./assets/data/News/side/plume.json");
})
});
plume.js
define(function (require,exports) {
function init($el,$link) {
var str='';
$.ajax({
url:$link,
type:"get",
success:function (data) {
$.each(data,function (item,i) {
str+=
'<li>' +
'<div class="numbers">'+parseInt(item+1)+'</div>' +
'<a href="'+i.url+'">'+i.title+'</a>' +
'</li>'
});
$el.find("ul").append(str);
}
})
}
exports.main=init;
})
list.js
define(function(require, exports){
function initList() {
var $list=$(".temp-loader");
var num=1;
scroll($list,num);
loadData($list,1)
}
function scroll($list,num) {
/*监听滚动条事件*/
$(window).on('scroll', function () {
/*判断滚动到屏幕底部,然后进行动态加载*/
len=num;
if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
if (++num <= 6) {
loadData($list, num);
} else if(num>=6) {
console.log(6)
//console.log('no data !!!' + $list.find('li').length);
}
}
})
}
function loadData($ele, num) {
$('.loading-panel').removeClass('hide');
$.ajax({
url: "./assets/data/News/list/newslist"+num+'.json',
type:"get",
success:function (data) {
var str='';
$.each(data,function (i,item) {
console.log(item)
str+=[
'<div class="news-temp-item">',
'<div class="head">',
'<a href="'+item.url+'" class="title">',
'<span>'+item.title+'</span>',
'</a>',
'<a href="'+item.url+'" class="img">',
'<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'+item.img+'" alt="">',
'</a>',
'<p>'+item.content+'</p>',
'</div>',
'<div class="item-info news-info">',
'<div class="times">',
'<span class="time1">'+item.year+'</span>',
'<span class="time2">'+item.month+'</span>',
'<span class="time3">'+item.day+'</span>',
'</div>',
'<span class="add-height watch add-left">'+item.watch+'</span>',
'<span class="add-height thump add-left">'+item.zan+'</span>',
'</div>',
'</div>'
].join('');
console.log(str)
});
$ele.append(str);
setTimeout(function () {
$('.loading-panel').addClass('hide');
}, 500)
}
})
}
exports.getInit=initList;
})
index.html
</html>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/js/package/require.js" data-main="./assets/js/common/news/main"></script>
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦