Метод и журнал событий
Основная кнопка работает через Data API, внешняя — вызывает toggle() у того же экземпляра. Журнал показывает before.load и loaded без повторной инициализации.
Первая записьЭлемент публичного сценария
Вторая записьЭлемент публичного сценария
Третья записьЭлемент публичного сценария
Четвёртая записьЭлемент публичного сценария
Экземпляр готов к загрузке.
HTML
<div id="api-feed" class="module-loadmore-list">
<article class="module-loadmore-item show">Первая запись</article>
<article class="module-loadmore-item vg-collapse">Вторая запись</article>
</div>
<button
id="api-loadmore-trigger"
data-vg-toggle="loadmore"
data-target="#api-feed"
data-elements="module-loadmore-item"
data-limit="1"
data-offset="1"
>Следующая запись</button>
JavaScript
import {VGLoadMore} from 'vgapp';
const trigger = document.querySelector('#api-loadmore-trigger');
const instance = VGLoadMore.getOrCreateInstance(trigger);
trigger.addEventListener('vg.loadmore.before.load', (event) => {
console.log('Перед загрузкой', event.cancelable);
// event.preventDefault() отменит текущую порцию.
});
trigger.addEventListener('vg.loadmore.loaded', ({detail}) => {
console.log('Загружено', detail.data);
});
instance.toggle();
instance.dispose();
CSS
/* Дополнительные стили не требуются. */