O que você precisa é o que chamam de chunks, que basicamente é dividir uma lista em lista menores, de tamanho máximo definido. Para tal, basta utilizar o método slice
de Array
para obter cada fatia da sua lista completa. Para facilitar, criei um gerador que iterará sobre as sub-listas:
function* paginate(list, size) {
for (let i = 0, j = list.length; i < j; i += size) {
yield list.slice(i, i+size)
}
}
const eventos = [
'Evento 01',
'Evento 02',
'Evento 03',
'Evento 04',
'Evento 05',
'Evento 06',
'Evento 07',
'Evento 08',
'Evento 09',
'Evento 10',
'Evento 11',
'Evento 12'
]
const paginas = paginate(eventos, 4)
for (let pagina of paginas) {
console.log(pagina)
}
Assim, bastaria você incrementar com a lógica de que quando o usuário pressionar o botão "Ver Mais", você busque o próximo valor do gerador e adicione à lista de elementos.
function* paginate(list, size) {
for (let i = 0, j = list.length; i < j; i += size) {
yield list.slice(i, i+size)
}
}
const eventList = [
'Evento 01', 'Evento 02', 'Evento 03', 'Evento 04',
'Evento 05', 'Evento 06', 'Evento 07', 'Evento 08',
'Evento 09', 'Evento 10', 'Evento 11', 'Evento 12'
]
const list = document.getElementById('lista')
const button = document.getElementById('btn')
const pages = paginate(eventList, 4)
button.addEventListener('click', function() {
const page = pages.next()
const events = page.value
if (page.done) {
this.disabled = true;
return;
}
for (let event of events) {
list.innerHTML += `<li>${event}</li>`
}
});
<ul id="lista"></ul>
<button id="btn">Ver Mais</button>