使用Javascript - 无限滚动JSON阵列? [英] Javascript - Infinite scroll JSON array?
本文介绍了使用Javascript - 无限滚动JSON阵列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的JavaScript这样的:
I have JavaScript like that:
items.forEach(function (item, index, arr) {
console.log(item.price);
var message = 'BitSkins Price: $' + item.bprice + '';
if (item.price != null) {
if (item.bprice == '') {
message = 'Item never sold on BitSkins!';
}
if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
$("#inventory").html($("#inventory").html() + "<li class='col 2' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + numberWithCommas(item.price) + "</li></div></div>");
}
}
});
这增加了每个项目
阵中的 HTML
,然后显示在那里。 项目
阵列containts JSON,这可能是 1000
不同的项目。我怎么可以添加无限滚动
上的JavaScript?例如:它会显示前50个项目,那么如果您滚动另外50 ..此外,通过价格对它们进行排序(我在code得到了它的话)
Which adds each item
in array to the html
and then shows there. items
array containts JSON, which could be 1000
different items. How could I add infinite scroll
on that JavaScript? Example: It will show first 50 items, then if you scroll another 50.. Also, sort them by the price (I got it in code already).
推荐答案
您可以轻松地做到这一点是这样的:
You can easily do it like this:
var perPage = 50;
function paginate(items, page) {
var start = perPage * page;
return items.slice(start, start + perPage);
}
function renderItems(pageItems) {
pageItems.forEach(function (item, index, arr) {
var message = 'BitSkins Price: $' + item.bprice + '';
if (item.price != null) {
if (item.bprice == '') {
message = 'Item never sold on BitSkins!';
}
if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
$("#inventory").append("<li class='col 2' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + numberWithCommas(item.price) + "</li></div></div>");
}
}
});
}
$(document).ready(function() {
var win = $(window);
var page = 0;
renderItems(paginate(items, page));
// Each time the user scrolls
win.scroll(function() {
// End of the document reached?
if ($(document).height() - win.height() == win.scrollTop()) {
page++;
renderItems(paginate(items, page));
}
});
});
$(document).ready(function() {
$(window).endlessScroll({
inflowPixels: 300,
callback: function() {
//append new items to your list
}
});
});
这篇关于使用Javascript - 无限滚动JSON阵列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文