永兴集团(中国区)官方网站-Macau App Station

400-800-9385
网站建设资讯详细

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

发表日期:2019-04-29 14:46:17   作者来源:永兴集团   浏览:3944   标签:网站制作    
近期在网站开发过程中遇到了一个需要在静态页面模拟点击加载更多的页面,为了更好的用户体验效果,永兴集团将实现一种无刷新加载的效果,现在来举个例子,页面布局如下:
 

网站开发案例1

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


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

 
上述功能就可以基本实现。

案例2

如没特殊注明,文章均为永兴集团原创,转载请注明来自/news/5032.html
XML 地图