在Javascript中无限滚动，其中包含来自文件的数据

Question

我想用普通的Javascript做无限滚动。我看过几个教程，但所有教程都从一些api中获取一些随机数据。我从教程中理解了代码，但我不知道如何按顺序获取数据，而不是随机的。我想做类似的事情：https://codepen.io/FlorinPop17/pen/RwwvKYJ 但我想使用本地文件中的数据。让我们假设它是数据.js并且具有类似的代码：data = [{}, {}]所以它是对象数组，让我们假设对象的内容是这样的：https://jsonplaceholder.typicode.com/posts/您将如何更改此代码笔中的代码以按顺序逐个显示帖子？我猜，函数getPost应该有参数“id”，每次调用这个函数时，参数都应该加1？但是怎么做呢？或者，也许我应该迭代数据.js并在每次迭代时检查用户是否滚动到底部？

Answer 1

您只需更改函数即可使用包含所有可用帖子的内联。当前偏移量保存在一个全局变量中，该变量每次调用都会增加，因此订单将保持不变，并且不会多次显示任何帖子。getPost()blog_datapost_offsetgetPost()

// all the blog entries that are available

const blog_data = [{

  title: "Blog Entry 1",

  body: "This is the example body text for entry 1."

},{

  title: "This is number two",

  body: "Also blog entry number 2 has some content."

},{

  title: "Blog entry three",

  body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

},{

  title: "Blog entry four",

  body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

},{

  title: "Blog entry five",

  body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

},{

  title: "Blog entry six",

  body: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

}];

const container = document.getElementById('container');

const loading = document.querySelector('.loading');

let post_offset = 0;

getPost();

getPost();

getPost();

window.addEventListener('scroll', () => {

  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

  if(clientHeight + scrollTop >= scrollHeight - 5) {

    // show the loading animation

    showLoading();

  }

});

function showLoading() {

  if(post_offset < blog_data.length){

    loading.classList.add('show');

    // load more data

    setTimeout(getPost, 1000)

  }

  else{

    // end has been reached, no more posts available

  }

}

async function getPost() {

  if(post_offset < blog_data.length){

    addDataToDOM(blog_data[post_offset]);

    post_offset++;

  }

}

function addDataToDOM(data) {

  const postElement = document.createElement('div');

  postElement.classList.add('blog-post');

  postElement.innerHTML = `

    <h2 class="title">${data.title}</h2>

    <p class="text">${data.body}</p>

  `;

  container.appendChild(postElement);

  loading.classList.remove('show');

}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap');

* {

  box-sizing: border-box;

}

body {

  background-color: #fafafa;

  font-family: 'Open Sans', sans-serif;

  padding-bottom: 100px;

}

.container {

  margin: 0 auto;

  max-width: 600px;

}

.blog-post {

  background-color: #fff;

  box-shadow: 0px 1px 2px rgba(50, 50, 50, .1), 0px 2px 4px rgba(60, 60, 60, 0.1);

  border-radius: 4px;

  padding: 40px;

  margin: 20px 0;

}

.title {  

  margin: 0;  

}

.text {

  color: #555;

  margin: 20px 0;

}

.loading {

  opacity: 0;

  display: flex;

  position: fixed;

  bottom: 50px;

  left: 50%;

  transform: translateX(-50%);

  transition: opacity .3s ease-in;

}

.loading.show {

  opacity: 1;

}

.ball {

  background-color: #777;

  border-radius: 50%;

  margin: 5px;

  height: 10px;

  width: 10px;

  animation: jump .5s ease-in infinite;

}

.ball:nth-of-type(2) {

  animation-delay: 0.1s;

}

.ball:nth-of-type(3) {

  animation-delay: 0.2s;

}

@keyframes jump {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px);

  }

}

<div class="container" id="container">

  <h1>Blog Posts</h1>

</div>

<div class="loading">

  <div class="ball"></div>

  <div class="ball"></div>

  <div class="ball"></div>

</div>