在文章很多的列表页面,技术人员为了控制版面的高度不能过高,一般会限制列表页文章的显示数量.比如一页显示4条,6条,10条,然后再到下方添加一个翻页功能.后面的文章都会显示到第2页,第3页去.

不过,这样的功能虽然简单,却缺少了一些用户的使用体验.

所以今天,长沙网站制作将会教您,如何制作点击按钮加载更多文章的效果:

一、页面代码展示

二、效果实现步骤

首先将所有文章全部获取,然后将文章的状态设置为:"display = 'none';".让文章都隐藏.

再将文章进行分页,这里长沙网站建设设置的是每页8篇文章.同时将第一页的文章都显示出来：

（初始页面展示）

点击文章底部的"加载更多"按钮时,将立刻触发事件:

loadMoreBtn.addEventListener('click', function() {
     if (currentPage < totalPages) {
        currentPage++;
        showPage(currentPage);
               
        if (currentPage >= totalPages) {
           loadMoreBtn.classList.add('hidden');
           }
     }
});

JS代码首先会进行判断,如果即将展示的页面并不是最后一页,那么则让"currentPage"的计数增加1,同时将这一页显示出来.如果即将展示的页面就是最后一页,那么在这一页的文章显示出来的同时,让加载按钮的状态变为隐藏.最终实现我们想要的效果.

二、效果视频展示

以上则是长沙网站设计整理出的制作点击按钮加载更多文章效果的方法,希望对您有所帮助!

长沙蒲公英网络——专注于为企业提供高效、优质的网站优化服务，致力于为您的企业发展全程保驾护航！

核心关键词：专业团队 · 贴心服务 · 助力增长

欢迎来电咨询：0731-84069615