登录

做有态度的前端团队

网易FEG前端团队

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

小梦子 作者: 日期: 2016-03-17
152876

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

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

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

art1.png

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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;
        }
         
                                  
    })
 
};

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

none
上一篇：记天下手游移动官网踩的坑   下一篇：CSS3动画的一些小总结
分享到:

    已有 41 条评论

    1. Magic

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

      回复
      1. 1

        1

        回复
      2. 1

        1

        回复
        1. 1

          1

          回复
        2. 1

          1

          回复
      3. 1

        1

        回复
      4. 1

        1

        回复
      5. 1

        1

        回复
      6. 1

        1

        回复
      7. 1

        1

        回复
      8. 1

        1

        回复
      9. 1

        1

        回复
      10. 1

        1

        回复
      11. 1

        1

        回复
      12. 1

        1

        回复
      13. 1

        1

        回复
    2. 1

      1

      回复
    3. 1

      1

      回复
    4. 1

      1

      回复
    5. 1

      1

      回复
    6. 1

      1

      回复
    7. 1

      1

      回复
    8. 1

      1

      回复
    9. 1

      1

      回复
    10. 1

      1

      回复
    11. 1

      1

      回复
    12. 1

      1

      回复
    13. 1

      1

      回复
    14. 1

      1

      回复
    15. 1

      1

      回复
    16. 1

      1

      回复
    17. 1

      1

      回复
    18. 1

      1

      回复
    19. 1

      1

      回复
    20. 1

      1

      回复
    21. 1

      1

      回复
    22. 1

      1

      回复
    23. 1

      1

      回复
    24. 1

      1

      回复
    25. 1

      1

      回复
    26. 1

      1

      回复
    取消回复

    添加新评论

    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

    © 2025 FEG-做最好的前端_网易游戏网站服务部前端团队_有态度的互联网前端团队. 由 NetEase 倾情推出.