使用Javascript - 无限滚动JSON阵列？ [英] Javascript - Infinite scroll JSON array?

问题描述

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

或者使用的jQuery插件endlessScroll

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

这篇关于使用Javascript - 无限滚动JSON阵列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！