gpt4 book ai didi

Javascript - 无限滚动 JSON 数组?

转载 作者:行者123 更新时间:2023-12-01 05:31:22 26 4
gpt4 key购买 nike

我有这样的 JavaScript:

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>");
}
}
});

它将数组中的每个item添加到html中,然后在那里显示。 items 数组包含 JSON,可能是 1000 不同的项目。我如何在 JavaScript 上添加无限滚动?示例:它将显示前 50 个项目,然后如果您滚动另外 50 个项目..此外,按价格对它们进行排序(我已经在代码中得到了它)。

最佳答案

您可以轻松地做到这一点:

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));
}
});
});

或者使用jQuery endlessScroll plugin

$(document).ready(function() {
$(window).endlessScroll({
inflowPixels: 300,
callback: function() {
//append new items to your list
}
});
});

关于Javascript - 无限滚动 JSON 数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37088304/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com