Простое подтягивание записи, загрузка дополнительных идей реализации

внешний интерфейс Vue.js Ajax jQuery

Обновление по запросу и загрузка по запросу являются более распространенными интерактивными эффектами на мобильных терминалах, и существует множество инкапсулированных библиотек, которые нам удобно вызывать. Но если это просто временная страница, может быть хорошим выбором реализовать ее без сторонней библиотеки. Сегодня я кратко расскажу о дополнительных идеях реализации загрузки подтягиваний.

анализировать

Чтобы разобрать процесс подтягивания и погрузки еще, его можно разделить на такие этапы:

  • Прокрутите страницу вниз...
  • страница прокрутилась вниз
  • В этот момент отображается анимация загрузки и отправляется запрос ajax.
  • После успешного выполнения запроса скройте анимацию загрузки и заполните данные

Через вышеуказанные шаги, не трудно найти, этот процесс является наиболее важным шагом, чтобы определить, является ли прокрутка в конце части. Чтобы сделать это суждение, нам нужно взглянуть на концепцию трех единиц длины:

  • Высота документа: то есть фактическая высота всего содержимого веб-страницы. Может быть часть этой части высоты, которую нельзя увидеть сейчас, и вам нужно прокрутить полосу прокрутки, чтобы увидеть ее.
  • Viewport Height: высота области веб-контента, которую вы видите в браузере. Регулировка высоты окна браузера соответственно изменит это значение.
  • Положение полосы прокрутки: если быть точным, это расстояние от верхней части вертикальной полосы прокрутки окна.

Если полоса прокрутки прокручивается вниз, они удовлетворяют следующей формуле:文档高度 - 视口高度 - 滚动条位置 == 0. Чтобы облегчить работу с DOM, утомительная обработка совместимости опущена. Используйте jQuery для выражения:$(document).height() - $(window).height() - $(window).scrollTop() == 0.

Ступай на яму

Кажется, довольно просто разобраться в ключевом шаге, пора реализовать описанный выше процесс с помощью кода:

<div class="list">
  <ul>
    <li>这是一条新闻</li>
    <li>这是一条新闻</li>
    <li>这是一条新闻</li>
    <li>这是一条新闻</li>
    ...
  <ul>
</div>

$(function(){
  var $list = $('.list');
  var htmlNodes = '';
  $(window).scroll(function(){
    // 为了体验更好，在滚动到顶部之前50px(这个值也可以是其他的，按需求来)的位置时执行关键操作
    if($(document).height() - $(window).height() - $(window).scrollTop() > 50){
      $list.append('<div class="loading">加载中...</div>')
      // 用定时器模拟ajax请求的异步操作
      setTimeout(function(){
        $('.loading').remove();
        for(var i = 0; i < 10; i++){
          htmlNodes += '<li>这是一条新闻</li>';
        }
        $list.html(htmlNodes);
      }, 1000);
    }
  });
});

В приведенной выше демонстрации используется таймер для имитации работы ajax-запроса для получения данных.Кажется, в этом нет никакой проблемы, но когда она действительно запущена, при прокрутке вниз вы увидите, что в конец было добавлено несколько элементов. списка.加载中...узел. это означаетifБлок операторов выполняется несколько раз, потому что$(winow).scroll()Срабатывает с высокой частотой, например, при прокрутке колеса может выполняться много раз за одну секунду$(winow).scroll(). Чтобы это исправить, вам нужно добавить глобальный идентификаторisEnd = false;при прокрутке внизisEnd = true;, а затем, когда запрос будет выполнен и будут отображены новые данныеisEnd = false;, а в приведенном вышеifЭтот флаг оценивается перед блоком операторовif isEnd return;

Обновить

Наступив на яму, обновите приведенный выше код (кроме того, измените узлы добавления и удаления в загрузке, чтобы показывать и скрывать).

<div class="list">
  <ul>
    <li>这是一条新闻</li>
    <li>这是一条新闻</li>
    <li>这是一条新闻</li>
    <li>这是一条新闻</li>
    ...
  <ul>
  <div class="loading" style="display:none;">加载中...</div>
</div>

$(function(){
  var $list = $('.list');
  var $loading = $('.loading');
  var htmlNodes = '';
  var isEnd = false;
  var page = 0;
  $(window).scroll(function(){
    if(isEnd) {
      return;
    }
    if($(document).height() - $(window).height() - $(window).scrollTop() > 50){
      $.ajax({
        type: 'POST',
        url: 'somePostUrl',
        data: {
          page: page++
        },
        dataType: 'json',
        success: function(res){
          // render the list
        },
        beforeSend: function(){
          $loading.show();
        },
        complete: function(){
          $loading.hide();
        }
      });
    }
  });
});

Эпилог

Вышеупомянутое содержание очень простое, но это также краткое изложение моего собственного обучения.Если есть ошибки, пожалуйста, поправьте меня. В последнее время он был относительно плавающим, и я чувствую себя немного в растерянности перед таким быстрым обновлением и итерацией внешнего интерфейса. Я слышал, что скоро появится vue3, но я еще не написал полный проект с vue. ES достиг ES7, ES8, и я все еще использую ES5. Беспокойство только усугубит ситуацию, поэтому есть предложение, которым я надеюсь поделиться с такими маленькими белыми, как я:Не останавливайтесь, но помните: медленнее всего быстрее.

Примечание автора

Статьи в блоге являются оригинальными, если не указано иное. Пожалуйста, указывайте источник при перепечатке, спасибо.

Содержание блога в основном представляет собой введение и обобщение новых знаний. Цель записи блога также состоит в том, чтобы облегчить консолидацию и обзор в будущем. Все желающие могут предложить любые недоразумения в статье, я был бы очень признателен. Буду рад, если статья окажется для вас полезной.

Категории