當滾動到頁尾時添加更多內容

嗨我只在一個月前開始使用JQuery Mobile，而我的首發項目是構建一個應用程序來加載我的博客文章。經過幾天和夜間的研究和支持後，我確實設法加載了我的博客帖子，並添加了「加載更多」鏈接以添加新內容。當滾動到頁尾時添加更多內容

我的意圖不是使用鏈接，我希望當我滾動到頁面結尾時添加新內容。我現在不打算使用插件，但希望能寫一個簡單的代碼來爲我做這件事。這是我當前的代碼（第一函數加載初始contenst而第二功能是追加更多內容。不知道這是最好的辦法，但就像我說的，我仍然在學習的過程）

$(document).on('pagebeforeshow', '#blogposts', function() { 
    $.ajax({ 
     url: "http://howtodeployit.com/?json=recentstories", 
     dataType: "json", 
     beforeSend: function() { 
      $('#loader').show(); 
     }, 
     complete: function() { 
      $('#loader').hide(); 
     }, 
     success: function (data) { 
      $('#postlist').empty(); 
      $.each(data.posts, function (key, val) { 

       //Output data collected into page content 
       var rtitle = $('<p/>', { 
        'class': 'vtitle', 
        html: val.title 
       }), 
       var rappend = $('<li/>').append(rtitle); 
       $('#postlist').append(rappend); 
       return (key !== 5); 
      }); 
      $("#postlist").listview().listview('refresh'); 
     }, 
     error: function (data) { 
      alert("Service currently not available, please try again later..."); 
     } 
    }); 
}); 

$(document).on("click", ".load-more", function() { 
    $.getJSON("http://howtodeployit.com/?json=recentstories", function (data) { 
     var currentPost = $('#postlist'); 
     console.log(currentPost); 
     loadMore = currentPost.parent().find('.load-more'); 
     var currentPostcount = $('#postlist li').length; 
     console.log(currentPostcount); 
     var desiredPosts = 3; 
     newposts = data.posts.slice(currentPostcount, currentPostcount + desiredPosts); 
     $.each(newposts, function (key, val) { 
      var rtitle = $('<p/>', { 
       'class': 'vtitle', 
       html: val.title 
      }), 
      var rappend = $('<li/>').append(rtitle); 
      $('#postlist').append(rappend); 
      $("#postlist").listview('refresh'); 

     }); 
    }); 
});

對不起如果這種類型的問題已經在其他地方回答了。請發佈鏈接

來源

2013-10-31 Chelseawillrecover

這是與jquery一種典型的途徑，

$(window).scroll(function() { 
    if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
     /*end reached*/ 
     $('.content').html($('.content').html()+"more</br></br></br></br>"); 
    } 
});

例如用JQM， http://jsfiddle.net/F5McF/

來源

2013-10-31 09:40:33 melc

試試這個例子它的工作原理。

function loaddata() 
{ 
    var el = $("outer"); 
    if((el.scrollTop + el.clientHeight) >= el.scrollHeight) 
    { 
     el.setStyles({ "background-color": "green"}); 
    } 
    else 
    { 
     el.setStyles({ "background-color": "red"}); 
    } 
} 

window.addEvent("domready", function() 
{ 
    $("outer").addEvent("scroll", loaddata); 
});

小提琴是

http://jsfiddle.net/wWmqr/1/

來源

2013-10-31 09:36:02

當滾動到頁尾時添加更多內容

回答

相關問題