бесконечная прокрутка с подключением к API

172

01 сентября 2018, 13:30

Так как в веб-разработке пару недель, прошу совета.

Хочу реализовать бесконечную прокрутку вот в таком вот формате :

Есть подключение по API с индексацией страницы (понимаю, что это делается не так, но чтобы было понятно досмотрите строку с подключением до конца )
```
def main(request):
    page=str(1)
    d3 = requests.get('https://d3.ru/api/posts/?sorting=rating&threshold_date=day&page='+page).json()
```
Как вы видите, каждое подключение, каждая следующая итерация, должна к page добавлять +1. В итоге при итерации должно быть :
```
page=str(2)
page=str(3)
page=str(4)
```
Я поставил слушатель внизу страницы, чтобы знать когда пользователь достигнет низа страницы для начала следующего подключения к API с индексом +1
```
$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        alert("uzhe dno");
});
```
Насколько я понимаю, это должно быть сделано через ajax. Привожу сырой код этого блока:
```
$.ajax({
     url: "{% url 'main' %}",
     type: "GET",
     //call main
 });
```

Но вот как синтаксически это правильно всё описать c запоминанием индекса и дальнейшей подгрузкой, пока что не понимаю.

Answer 1

бесконечная прокрутка с подключением к API

При условии, что серверная часть у вас умеет вызывать страницы или хотя бы делится по какому-то признаку, вам подойдет ajax, представленый в следующем примере.

Каждый раз когда прокрутка приходит ко "дну" документа, вызывается функция продгружающая следующую страницу, в этом примере albomId делит информацию на куски, которые потом можно подгружать частями.

$(document).ready(function() { 
  var counter = 1; 
  $(window).scroll(function() { 
    if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
      // ajax вызван так как достигли дна документа 
      counter++; // Следующая страница/албом 
      getData(counter) // вызов следующих данных 
    } 
  }); 
  // Дефолтный вызов данных 
  function getData(id = 1) { 
    // Вызов по URL 
    fetch('https://jsonplaceholder.typicode.com/photos?albumId=' + id) 
      .then(response => response.json()) 
      .then(json => { 
         // Проход по данным 
        json.forEach((photo) => { 
          // Карточки создаются тут 
          var card = 
            `<div class="row"> 
              <div class="col s12 m7"> 
                <div class="card"> 
                  <div class="photo-image"> 
                    <img src="${photo.url}" title="placeholder picsum.photos"> 
                    <span class="card-title">Card Title ${photo.id}</span> 
                  </div> 
                  <div class="card-content"> 
                    <p>${photo.title}</p> 
                  </div> 
                  <div class="card-action"> 
                    <a href="#">This is a link</a> 
                  </div> 
                </div> 
              </div> 
            </div>` 
          // Добваляются карточки  
          $('.container').append(card) 
        }) 
 
      }) 
  } 
  // Первый вызов  
  getData(); 
 
});

.card img { 
  width: 100%; 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!-- Compiled and minified CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"> 
<div class="container"> 
  <!-------- Goes here --------> 
</div>

Документация:

Fetch API

Шаблонные строки (Template literals)

Стили Materialize

Answer 2

В джиквери проверь накрутил ли ты до низа страницы. Как только ты накрутил до низа, сделай аджакс обращение и получите инфу, добавьте ее к диву. Эта функция выполняется пока вы крутите колесиком вниз.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});

С аджаксом я вам не помогу - учите аджакс.

И вообще поищите в гугле load more on scroll ajax; или вот ссыль https://www.thesoftwareguy.in/ajax-scroll-pagination-php-mysql/ токо там на пэхэпэ Демо

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

бесконечная прокрутка с подключением к API

Как скрыть часть номера телефона?

NHibernate HasMany с коллекцией Id

Как запустить скрипт python3 в C#?

Dll на .NET Core для UWP/WPF/ASP.NET Core приложений