Бесконечная прокрутка в Javascript с данными из файла - PullRequest
Новая
       11

Бесконечная прокрутка в Javascript с данными из файла

0 голосов
/ 25 мая 2020

Я хочу сделать бесконечную прокрутку на простом Javascript. Я видел несколько руководств, но все они извлекают случайные данные из некоторого api. Я понимаю код из руководств, но я не знаю, как получать данные по порядку, а не случайным образом.

Я хочу сделать что-то подобное, например, здесь: https://codepen.io/FlorinPop17/pen/RwwvKYJ, но я хочу использовать данные из моего локального файла. Предположим, что это data. js и имеет такой код: 

data = [{}, {}]

, так что это массив объектов, и предположим, что содержимое объектов выглядит так: https://jsonplaceholder.typicode.com/posts/

Как бы вы изменили код этого кода, чтобы сообщения отображались по порядку? Я думаю, у функции getPost должен быть параметр «id», и каждый раз, когда эта функция вызывается, параметр должен быть плюс 1? Но как это сделать? Или, может быть, мне следует перебирать данные. js и на каждой итерации проверять, прокручен ли пользователь вниз?

1 Ответ

1 голос
/ 25 мая 2020

Вам просто нужно изменить функцию getPost(), чтобы использовать встроенный blog_data, содержащий все доступные сообщения. Текущее смещение сохраняется в глобальной переменной post_offset, которая увеличивается с каждым вызовом getPost(), поэтому порядок останется прежним, и сообщения не будут отображаться несколько раз. 

// 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>
...