在滚动页面加载更多不加载页面2
问题描述:
我仍然坚持这一点,所以很抱歉,这个重叠的问题。 我试图创建一个产品页面,从第一页加载产品。用户向下滚动第二页中的产品时需要加载。我搜索了这个Q &一个网站和许多教程,但我无法得到这个工作。在滚动页面加载更多不加载页面2
shop.com/category/page1.ajax的产品已正确加载,但向下滚动时,我不知道为什么shop.com/category/page2.ajax等产品未加载。
像无限滚动插件不是一个选项。
任何帮助非常感谢。
的JSON/Ajax的字符串(因为长度的精缩):
{
"page": 1,
"pages": 7,
"count": 42,
"url": "http:\/\/meules1.webshopapp.com\/woonkamer-en-keuken\/",
"products": [
{
"id": 1750137,
"vid": 2765003,
"image": "http:\/\/cdn.webshopapp.com\/i\/z1faly\/50x50x2\/newc.jpg",
"image_id": 2156769,
"brand": false,
"code": "40-95407",
"ean": "40-95407",
"sku": "",
"score": false,
"price": {
"price": 65,
"price_money": "\u20ac65,00",
"price_money_with_currency": "\u20ac65,00 EUR",
"price_money_without_currency": "65,00",
"price_excl": 54.6218,
"price_excl_money": "\u20ac54,62",
"price_excl_money_with_currency": "\u20ac54,62 EUR",
"price_excl_money_without_currency": "54,62",
"price_incl": 65,
"price_incl_money": "\u20ac65,00",
"price_incl_money_with_currency": "\u20ac65,00 EUR",
"price_incl_money_without_currency": "65,00",
"price_old": 109,
"price_old_money": "\u20ac109,00",
"price_old_money_with_currency": "\u20ac109,00 EUR",
"price_old_money_without_currency": "109,00",
"price_old_excl": 91.5966,
"price_old_excl_money": "\u20ac91,60",
"price_old_excl_money_with_currency": "\u20ac91,60 EUR",
"price_old_excl_money_without_currency": "91,60",
"price_old_incl": 109,
"price_old_incl_money": "\u20ac109,00",
"price_old_incl_money_with_currency": "\u20ac109,00 EUR",
"price_old_incl_money_without_currency": "109,00"
},
"available": true,
"url": "http:\/\/meules1.webshopapp.com\/newc.html",
"title": "Newc",
"fulltitle": "Newc",
"variant": "",
"description": "In de serie Newcastle bieden wij nu ook dit TV meubel \/ salontafel aan. Deze",
"data_01": ""
},
{
"id": 1750135,
"vid": 2765001,
"image": "http:\/\/cdn.webshopapp.com\/i\/z1falp\/50x50x2\/utrecht.jpg",
"image_id": 2156760,
"brand": false,
"code": "nov-89",
"ean": "nov-89",
"sku": "",
"score": false,
"price": {
"price": 47.5,
"price_money": "\u20ac47,50",
"price_money_with_currency": "\u20ac47,50 EUR",
"price_money_without_currency": "47,50",
"price_excl": 39.916,
"price_excl_money": "\u20ac39,92",
"price_excl_money_with_currency": "\u20ac39,92 EUR",
"price_excl_money_without_currency": "39,92",
"price_incl": 47.5,
"price_incl_money": "\u20ac47,50",
"price_incl_money_with_currency": "\u20ac47,50 EUR",
"price_incl_money_without_currency": "47,50",
"price_old": 65,
"price_old_money": "\u20ac65,00",
"price_old_money_with_currency": "\u20ac65,00 EUR",
"price_old_money_without_currency": "65,00",
"price_old_excl": 54.6218,
"price_old_excl_money": "\u20ac54,62",
"price_old_excl_money_with_currency": "\u20ac54,62 }
jQuery的:
<script type="text/javascript">
$(document).ready(function(){
// var pageSize = {{ collection.limit }};
var currentPage = {{ collection.page }};
var collectionPages = {{ collection.pages }};
var category = '{{ collection.internal.url }}';
// Appends the new product to the UI
var appendProduct = function(product, id) {
$('<div class="product"></div>')
.html(product)
.appendTo($(".productsGrid"));
};
// Load the next products
var loadProducts = function() {
var url = "http://shop.com/"+category+"/page"+currentPage+".ajax";
$.getJSON(url,function(data) {
console.log(data);
$.each(data.products, function(index, product) {
appendProduct('<a href="'+product.url+'" title="'+product.fulltitle+'">' +
'<img src="'+product.image+'" width="180" height="150" alt="'+product.fulltitle+'" title="'+product.fulltitle+'"'+'</a>' +
'<div class="info"><h3><a href="'+product.url+'" title="'+product.fulltitle+'">'+product.fulltitle+''+'</a></h3>' +
'<div class="price">'+product.price.price_money+''+'</div>' +
'<div class="gridAddToCart"><a class="button grey" href="'+product.url+'" title="'+product.fulltitle+'" rel="nofollow">'+'<span>{{ 'Details' | t }}</span></a>' +
'<div style="margin-top:2px;"></div>' +
'<a class="opener button blue" href="http://shop.com/cart/add/'+product.vid+'" title="'+product.fulltitle+'" rel="nofollow"><span>{{ 'Add to cart' | t }}</span></a>'
+ '<div class="clear"></div>' +
'</div><div class="clear"></div></div>'
);
});
// We're done loading the products, so hide the overlay and update the UI
$("#overlay").fadeOut();
});
};
// First time, directly load the products
loadProducts();
// Append a scroll event handler to the container
$(".productsGrid").scroll(function() {
// We check if we're at the bottom of the scrollcontainer
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
// If we're at the bottom, show the overlay and retrieve the next page
currentPage++;
$("#overlay").fadeIn();
loadProducts();
}
});
});
</script>
答
也许scroll
功能在不触发该选定元素productsGrid。你会检查一下警报吗? productsGrid是否有滚动条,还是只是整个页面的一部分?你可以尝试一个更通用的方法对整个文档:
在getJSON
,
// We're done loading the products, so hide the overlay and update the UI
$("#overlay").fadeOut();
$(window).scroll(function() { update(); }); // <-- ADD THIS LINE
});
};
// First time, directly load the products
loadProducts();
var update = function() { // <-- NAME THIS AS FUNCTION
// activate loadProducts when scrollbar reaches 150 pixels or less from the
// bottom, instead of having scrolled exactly all the way to the end.
if($(window).height() + $(window).scrollTop() >= $(document).height() - 150) {
if(currentPage < collectionPages) {
// If we're at the bottom, show the overlay and retrieve the next page
currentPage++;
$("#overlay").fadeIn();
$(window).unbind('scroll'); // <-- ADD THIS LINE
loadProducts();
}
}
};
$(window).scroll(function() { update(); }); // <-- ADD THIS LINE
THX我完全错过了一个...咄!产品现在保持永久加载。当最后一个产品到达时,你是否知道停止的方法? – Meules
你的JSON显示属性“页面”,你可以在if语句中使用它来防止加载?我不太确定你的应用程序是如何工作的。 –
你是什么意思应用程序的工作原理?你认为这不是一个好办法吗?如果是这样,请让我知道,因为我愿意学习。页面显示该特定类别有7个页面。 – Meules