继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

require.js 基础......

qaytix
关注TA
已关注
手记 104
粉丝 37
获赞 165

图片描述

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 src="'+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  src="./assets/js/package/require.js" data-main="./assets/js/common/news/main"></script>
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP