Faça o seu site responder quando os elementos aparecem na tela

Olá pessoal, estou de volta.

Desta vez, vamos nos aprofundar no pool de códigos, mas não se preocupe, ficaremos na parte rasa.

Mesmo se não tiver muita experiência com codificação, existem alguns efeitos interessantes que você pode criar usando o painel Propriedades e apenas uma ou duas linhas de código. Nesse post, vamos falar sobre a API onViewportEnter. Veja no fim desse post como um pequeno código pode fazer isso funcionar.

Como os docs da API explicam, onViewportEnter "adiciona um manipulador de eventos (apenas outra maneira de dizer que executa algum código) que é executado quando um elemento é rolado para a parte visível da janela atual. Um elemento entra no visor quando a página é rolada para mostrar qualquer parte do elemento. Um elemento entra no visor mesmo se é escondido ou expandido".

Simplificando, onViewportEnter faz algo acontecer quando o elemento que você adicionou aparece na tela.

Vamos ver um caso simples. Suponha que você tenha um repetidor em sua página e queira exibir apenas 10 itens por vez, mas sua coleção tem 100 itens. Você deseja adicionar um botão "Descubra Mais" na parte inferior do repetidor que acionará o conjunto de dados para carregar os próximos 10 itens, mas você deseja que esse botão apareça somente quando o usuário rolar para o final do repetidor. Veja o que você faria.

1. Verifique se o conjunto de dados "Número de itens a exibir" está definido para 10.

2. Certifique-se de que seu botão esteja definido como "Hidden on load" no painel Propriedades.

3. Selecione seu botão e adicione um evento onClick a ele no painel Propriedades. Uma função é adicionada ao seu painel de código para o evento onClick do botão.

4. Nessa função adicione esse código "$w("#yourDataset").loadMore();" a. Isso informa ao conjunto de dados para carregar os próximos 10 itens quando o botão for clicado. b. Certifique-se de substituir "yourDataset" pelo nome do seu conjunto de dados atual.

5. Adicione uma âncora à sua página e posicione-a sobre o botão. Vamos usar esta âncora para ver quando o botão aparece na tela. Precisamos fazer isso porque o botão começa oculto e nunca aparece para começar.

6. Selecione a âncora e inclua um manipulador de eventos onViewportEnter no painel Propriedades. Uma função é adicionada ao seu painel de código para o evento onViewportEnter.

7. Adicione à essa função esse código. "$w("#button").show("FadeIn");"

a. Isso faz com que o botão seja exibido com o efeito Fade In quando a âncora aparece na tela.

b. Certifique-se de substituir a palavra "botão" pelo nome do seu botão.

Agora, quando você rolar para a parte inferior do repetidor, o botão Descubra Mais aparecerá, no qual o usuário pode clicar para carregar os próximos 10 itens no repetidor.

Claro, você pode querer que o botão desapareça até precisar dele novamente. Para fazer isso, apenas adicione um manipulador de eventos onViewportLeave à sua âncora e adicione o código para criar o botão FadeOut. Agora, o botão desaparece quando o repetidor carrega e entra novamente quando o usuário rola mais para baixo.

Esse é todo o código:

export function button1_click(event, $w) {
    $w("#dataset1").loadMore();
}
export function anchor1_viewportEnter(event, $w) {
    $w("#button1").show("FadeIn");
}
export function anchor1_viewportLeave(event, $w) {
    $w("#button1").hide("FadeOut");
}

Veja como aparece:

Obviamente, essa é apenas uma das aplicações dessa API. Você pode fazer com que seu site responda da maneira que quiser quando qualquer elemento aparecer na tela.