Pull-load
Компонент, совместимый с ПК и мобильными устройствами, который поддерживает:
GitHub: https://github.com/xiyan1120/pull-load
OSChina: https://git.oschina.net/564468767/pull-load
Уважайте авторские права. При перепечатке укажите источник: https://my.oschina.net/u/164010/blog/833722
1. Импорт JS:
<script type="text/javascript" src="dist/pull-load.min.js"></script>
2. Использование:
new PullLoad({
// Контейнер всего слоя прокрутки — это dom
container: document.getElementById("outerScroller"),
// Указываем dom полосы прокрутки, если не указано, по умолчанию используется container
// scrollBar: document.getElementsByTagName("body")[0],
down: {
distance: 50, // По умолчанию расстояние
enable: true,
callback: function (end) {
setTimeout(function () {
console.log("end");
var isEmptyData = false;
end(isEmptyData);
}, 1500);
}
},
up: {
distance: 50, // Расстояние по умолчанию, также высота созданного div по умолчанию
isScrollLoad: false,
isInitLoad: false,
enable: true,
callback: function (end) {
setTimeout(function () {
console.log("end");
var isEmptyData = false;
end(isEmptyData);
}, 1500);
}
}
});
3. up:
up: {
// Это расстояние используется для определения того, показывать ли загрузку при подъёме или отображение освобождения загрузки
distance: 50,
// Созданный контейнер div, также родительский элемент для настройки html ниже
container: '<div class="pull-load-container"></div>',
// HTML, отображаемый при инициализации
init: '<div class="pull-load-up"><span><span class="pull-load-up-icon"></span>上拉加载更多...</span></div>',
// Отображаемый HTML при загрузке
loading: '<div class="pull-load-up pull-load-loading"><span class="pull-load-up-icon"></span>加载中...</span></div>',
// Отображение HTML при освобождении
release: '<div class="pull-load-up flip"><span><span class="pull-load-up-icon"></span>释放加载...</span></div>',
// Отображение HTML, когда данных нет
emptyData: '<div class="pull-load-empty-data">没有更多数据了</div>',
// Можно ли использовать
enable: true,
// Загружать ли при прокрутке до конца div
isScrollLoad: false,
// Загрузить ли после завершения инициализации
isInitLoad: false,
// Функция обратного вызова, параметр — функция, которая должна быть выполнена после завершения вызова
callback: function(end){
// Установить значение true, если данные не загружены, иначе — false
var isEmptyData = true;
// Эта функция имеет параметр, используемый для установки того, есть ли данные
end(isEmptyData)
}
}
4. down (описание аналогично up):
down: {
// Используется для определения отображения загрузки при подъеме или отображения освобождения загрузки, а также для создания высоты нижнего div по умолчанию
distance: 50,
container:'<div class="pull-load-container"></div>',
init:'<div class="pull-load-down"><span><span class="pull-load-down-icon"></span>下拉刷新...</span></div>',
loading:'<div class="pull-load-down pull-load-loading"><span class="pull-load-down-icon"></span>刷新中...</span></div>',
release:'<div class="pull-load-down flip"><span><span class="pull-load-down-icon"></span>释放刷新...</span></div>',
emptyData:'<div class="pull-load-empty-data">没有更多数据了</div>',
enable:true,
callback:null
}
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )