Загрузка списка-это мобильный подтягивание и раскрыванием загрузки больше компонентов. В основном он опирается на компоненты, разработанные на основе iscroll.js v5.1.2. Основная библиотека может использовать jQuery.js или Zepto.js для управления узлом DOM. В настоящее время я использую Zepto.js в качестве основной библиотеки для управления DOM и существует в виде плагина jQuery. Если вы не хотите использовать его в качестве плагина, вам просто нужно напрямую перенести загрузку списка в нужную вам библиотеку, это нормально. Загрузка списка предназначена в основном для мобильных терминалов. При использовании браузера он поставляется с прокруткой. Пользовательский опыт очень недружелюбен и сильно отличается от Android и iOS. Следовательно, он выбирает iscroll.js. Его метод реализации состоит в том, чтобы использовать анимацию CSS3, перевести 2D -преобразование для достижения эффекта прокрутки. Атрибут Transform использует аппаратное ускорение, и метод производительности был значительно улучшен.
Установка NPM
Кода -копия выглядит следующим образом:
npm install -g listloading
Как использовать его следующим образом:
1. Структура HTML
Та же структура, что и IScroll, созданная, но указанный узел созданного элемента должен указать идентификатор, поскольку для публикации режима подписки в компоненте требуется идентифицируемая идентификация. Поскольку IScroll должен установить высоту до создания элемента узла, в противном случае он не будет прокручиваемым; IScroll создается и назначен первым дочерним элементам для прокрутки, поэтому к первому дочернему элементу также добавляется подтягивание и раскрывающийся обновление загрузки списков. На самом деле, просто представьте себе первый дочерний элемент как тело в HTML.
2. JS, который необходимо ввести
<script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/iscroll.js"> </script> <script src = "../ build/lizeload.js"> </script>
3. Позвоните
var m = 3, n = 0; // Вы должны установить высоту родительского элемента перед созданием IScroll, в противном случае вы не можете перетащить iscroll $ ('#lizeloading'). Высота ($ (window) .height ()); // Шаблон или метод запроса ajax var varehtml = function () {var __html = ''; Date (). Gettime (); own = new Date (Now + I*1000000); __ html + = '<li> <pan> </span> <p> <time>' + now.gethours () + ':' + now.getminutes () + ':' + now.getseconds () + '</time> listload' + (n + 'pultseconds () <p> plup-rup () <p> plup-rup () <ple-lobile (). Компонент ... </li> ';} return __html;} // Селектор должен быть идентификатором, потому что необходимо использовать подписку на публикацию в качестве идентификатора var liledloading = $ ('#listloading '). Listloading ({Disabletime: true, // Независимо от того, требуется ли время отображения: function (cb) {//wautpulme logle m-var var var var var var rAlg =; createHtml (); if (m <1) {flg = true;} else {$ ('#ordation-list'). Приложение (__ html);} // После загрузки данных необходимо вернуть конец к истину. CreateHtml (); $ ('#Order-List'). HTML (__ HTML); // После выполнения метода выполнения необходимо выполнить обратный вызов. Пузыри, он также рекомендует написать метод клика сам по себе. Если вы позволите предотвратить False, эта строка решит проблему сбоя OnClick. Однако, если вы откроете это значение и перетащите его под WeChat, будут проблемы. После того, как слайд заканчивается, прокрутка не может быть вызвана. Таким образом, я встроил метод события сам listloading.evt ('li', 'click', function (dom) {// dom.remove (); // $ ('#order-list'). Append (createhtml ()); // lizeloading.refresh ();});Диаграмма воспроизведения
/p>
4. API
4.1 Стянитесь, чтобы обновить
Инициализация будет выполнена один раз, в основном для создания ISCROLL, а затем каждое обновление выполняется после конца каждого раскрывающегося обновления. После выполнения вашей программы в методе необходимо выполнить функцию обратного вызова для информирования всех программ, которые были выполнены, списка загрузки автоматически вызовет функцию обновления Iscroll, и обратный вызов не требует передачи параметров.
Options.pulLdownAction = function (cb) {// потянуть вниз, чтобы обновить .... // После выполнения метода выполнения необходимо выполнить обратный CB ();}4.2 Подтягивание обновления
Каждое обновление выполняется после завершения обновления. То же самое требуется для выполнения функции обратного вызова после выполнения вашей программы. Логическое значение требуется в обратном вызове. Если это правда, то почему это было загружено, и это было поднято до конца.
Options.pullupaction = function (cb) {// winlown reware .... // После выполнения метода выполнения обратный вызов должен быть истинным, чтобы спуститься до конца cb (true);}4.3 Уничтожьте списку загрузки
Кода -копия выглядит следующим образом:
ListLoading.destroy ();
4.4 Обновление списка загрузки
Если в узле области прокрутки есть дополнения и удаления, вам необходимо вызвать этот метод после завершения операции.
Кода -копия выглядит следующим образом:
ListLoading.refresh ();
4.5. Отображать ли значение по умолчанию значение по умолчанию
True Down Down отображает время, время от последнего обновления
Кода -копия выглядит следующим образом:
Options.DisableTime = true
4.6 Потяните, чтобы обновить текст
Кода -копия выглядит следующим образом:
Options.uploadMoreTxt = 'Потянуть, чтобы обновить текст'; // вы можете поместить в него теги HTML
4.7 Потяните вниз, чтобы обновить текст
Кода -копия выглядит следующим образом:
Options.pulldrefreshtxt = 'перетаскивать, чтобы обновить текст'; // вы можете поместить в него теги HTML
4.8 Загрузка китайских иерок
Кода -копия выглядит следующим образом:
Options.LoadErtxt = 'Китайские символы загружаются'; // вы можете поместить в него теги HTML
4.9 Отпустите текст обновления
Кода -копия выглядит следующим образом:
Options.RealTimetxt = 'Выпустить текст обновления'; // вы можете положить HTML -теги внутрь
4.10 Все тексты были загружены
Кода -копия выглядит следующим образом:
Options.LoadErendTxt = 'весь текст был загружен'; // вы можете поместить в него теги HTML
4.12 ISCROLL Configuration
Кода -копия выглядит следующим образом:
Options.iscrolloptions = {};
Выше приведено мобильный терминал ListLoading.js, введенный редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!