对于这个重叠的问题，我仍然坚持这一点。 我正在尝试创建一个从第一页加载产品的产品页面。当用户向下滚动时，需要加载第二页的产品。我搜索了这个Q＆amp; A网站和大量的教程，但我无法让它工作。
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>
答案 0 :(得分：1)
对于所选元素productsGrid，可能没有触发scroll函数。你能用警报来检查吗？ 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