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
}
You can comment after Login
Inappropriate content may be displayed here and will not be shown on the page. You can check and modify it through the relevant editing function
If you confirm that the content does not involve inappropriate language/advertisement redirection/violence/vulgar pornography/infringement/piracy/false/insignificant or illegal content related to national laws and regulations, you can click submit to make an appeal, and we will handle it as soon as possible.
Comments ( 0 )