帮助

瀑布流实现下拉加载更多

2023-12-21 16:11 标签调用

前端页面瀑布流如何实现下拉加载更多?

使用瀑布流标签配合js就能实现页面下拉加载更多。


瀑布流调用标签

<div id='与artlist标签的tagid名称一致'>
{eyou:artlist typeid='栏目ID' row='10' tagid='唯一的标签名称'}
    <a href='{$field.arcurl}'>{$field.title}</a>
{/eyou:artlist}
</div>
{eyou:artpagelist pagesize='3' tagid='与artlist标签的tagid名称一致' tips='没有数据了'}
    <a id='gengduo' href="javascript:void(0);" {$field.onclick}>加载更多</a>
{/eyou:artpagelist}

实现下拉触发加载更多的js

<script>
    //监听滚动事件
    let timer = null;
    document.addEventListener('scroll', function () {
    clearTimeout(timer);
    //判断是否滚动到 底部
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 50){
        timer = setTimeout(function(){
        document.getElementById( 'gengduo').click();
        },300)
        }
    });
</script>



QQ在线咨询