做有态度的前端团队

网易FEG前端团队

关于嵌套新闻发布系统的一些事

本文主要总结嵌套新闻发布系统遇到的一些问题及解决方法!

一、移动端-新闻内页中嵌套新闻列表页

如下图,在该新闻内页里面还需要嵌套新闻列表页,并且两者都需要加载更多翻页功能

art1.png

所以,在这种情况下,内嵌的列表页需要用ajax获取并且实现翻页加载更多功能,链接在此

    var  _nextHostList="http://stzb.test.nie.163.com/m/qyz/news_list",
        _nextHost="",
        _totalPagesList=1,
        _totalPages=1,
        _type="list",
    _typeArticle="article",
    flag = true,  //标识是否加载完成
    check = true,  //标识是否加载完成
    _curPageList=1,
    _curPage=1;
    var _initList=function(type){
    _type=type;
    _totalPages=Number($("#hd_totalPages").val());
    getNext(_nextHostList+".html");
    if( _totalPages >1){
        _nextHost=$("#hd_nextUrl").val().replace("2.html","");
        $("#btn_getmore").html("点击获取更多");
        $("#btn_getmore").css("display","block");
    }
    }
    function getNext(nextUrl){
    $.ajax({
        url:nextUrl,
        dataType:"html",
        type:"get",
        success:function(data){
            var $data=$(data);
            var $divContainer=null;
            var selecter = "#NIE-list";
            _totalPagesList=Number($data.find("#hd_totalPagesList").val());
            $(selecter).append($data.find(selecter).html());
            if( _totalPagesList >1){
                $("#btn_getmore02").html("点击获取更多");
                $("#btn_getmore02").css("display","block");
                addEventList();
            }
            if( _curPageList==_totalPagesList ){
                $("#btn_getmore02").css("display","none");
            }
            flag = true;
        }
    })
    }

二、PC端-嵌套新闻发布系统

如下图,在做PC端-翻页加载更多功能时,也想着用ajax去获取,但是这样的话在IE下会乱码,所以不能用ajax,需要用iframe去做;链接在此

list.pngart-pc.png

        var getArt = function(url){
            $art_iframe.attr('src',url);
            var load_check = load_more;
            $art_iframe.load(function(){
                if(load_check == load_more){
                    load_more++
                    var $data;

                    try{
                        $data = $art_iframe.contents();
                    }catch(e){
                        window.location.href = url;
                        return;
                    }
                    $('#NIE-art .artText').append($data.find('#NIE-art .artText').html());
                    $("#btn_getmore").html("点击获取更多");
                    if( $curPage == $totalPages ){
                        $("#btn_getmore").css("display","none");
                    }
                    check = true;
                }
                
                                         
            })

        };

手机阅读请扫描下方二维码:

已有 1 条评论

  1. Magic

    http://zmq.test.nie.163.com/news/index_.html
    PC端的可以了解一下这个页面的做法,它是滚动之后加载更多,改成点击是一样的,之前网易游戏的列表页也使用过这种做法,没有编码的问题。

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif