网站制作之静态页面模拟点击加载更多

2023-03-19    分类： 网站建设

近期在网站开发过程中遇到了一个需要在静态页面模拟点击加载更多的页面，为了更好的用户体验效果，我们将实现一种无刷新加载的效果，现在来举个例子，页面布局如下：

页面整体简洁大方，要实现的功能是：页面打开默认显示六条信息，当用户点击下面的“see more+”时，在下面加载三条，当信息全部加载完之后，再点击“see more +”的时候“see more +”显示为“Already shown”,别看这一点变化，需要使用到的JS代码还是比较复杂的，例如如何显示正在加载中，如何让内容更好的嵌接在一起显示等问题，都需要通过JS的代码来实现。
为此在页面布局上html代码如下:





see more +
这里只是给了10条数据，现在通过js代码判断如下：

案例2

新闻名称：网站制作之静态页面模拟点击加载更多
当前网址：https://www.cdcxhl.com/news/245814.html

成都网站建设公司_创新互联，为您提供云服务器、外贸网站建设、网站策划、做网站、搜索引擎优化、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站托管运营

网站建设知识

同城分类信息