无限分页infinite-scroll整合SpringMVC

港控/mmm° 2022-05-24 07:19 165阅读 0赞

**阅读本文可能会解决的问题：**

① infinite-scroll.js和html页面的整合  
② infinite-scroll.js的配置  
③ 翻页时的传参问题  
④ 前台及后台分页配置  
⑤ 数据加载格式及和SpringMVC配合返回数据

⑥ ...

这里先说几句无关的话，无限翻页是一个很简单的需求，为了节省网络资源提高用户体验很多网站都使用这种形式，但是在自己做的时候发现一个很实用的js插件被很多人描述的很潦草，还有的居然骗下载赚积分，真的过分！自己研究之后决定记录一下，方便自己也分享给大家。

这个示例实现的效果：打开页面鼠标滚轮滑到页面底部，自动加载下一页数据，直到所有数据加载完成。

![20180523143848423][]

### **一、infinite-scroll.js和html页面的整合及配置** ###

1. 首先需要引入两个js文件，jQuery就不说了，jquery.infinitescroll.js可以在 [infinitescroll中文网][infinitescroll]下载，或者去 [官网][Link 1]下载最新的版本，中文网提供了3.X之前的几个版本可以下载使用，我这里选择2.0的版本

引入js后需要注意：

① 用户第一次打开页面需要预先加载几条数据

② 我这里都是动态从后台获取的数据

③ 在界面加载数据我使用模板语言thymeleaf，如果是jsp直接用EL表达式获取数据即可

④ ul就是要填充下一页数据的容器每次执行翻页就会向ul中添加新取回的li

2. 接下来引入js配置文件

$('#content').infinitescroll({
                loading: {
                    msgText: "",
                    img: "/images/home/loading2.gif",
                    finishedMsg: '没有新数据了...',
                    selector: '.loading' //loading选择器
                },
                hideNav: '#pages',
                navSelector: "#pages",//导航的选择器，会被隐藏
                nextSelector: "#next",//包含下一页链接的选择器
                itemSelector: "li",//你将要取回的选项(内容块)
                debug: false, //启用调试信息，若启用必须引入debug.js
                dataType: 'json',//格式要和itemSelector保持一致
                template: function(data) {
                   //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
                   //console.log(data.list);
                   //return '<li><label>测试数据1</label><p>测试数据1</p></li><li><label>测试数据2</label><p>测试数据2</p></li>';
                   return data.list;
                },
                maxPage: 5,//最大加载的页数
                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
                extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
                //                bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
                errorCallback: function() { //加载完数据后的回调函数
    
                },
                path: function(index) { //获取下一页方法
                    return "../article/getList?page=" + index+"&wzlb=" + clickid;
                },
        },
        function(newElements, data, url) { //回调函数
            //console.log(data);
            //alert(url);
        });

① itemSelector: "li"是我们要加载的数据内容

② dataType: 'json'代表我从后台接收回来的数据是json格式，当然还可以是html

③ 这里template用来处理返回的数据，我使用springmvc返回json数据直接return即可

template: function(data) {
                   //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
                   //console.log(data.list);
                   //return '<li><label>测试数据1</label><p>测试数据1</p></li><li><label>测试数据2</label><p>测试数据2</p></li>';
                   return data.list;
                },

④ 这里path获取下一页的请求地址，page是插件自动递增所以不需要处理，直接拼接index即可，如果有其他参数需要传递需要像我这样拼接，最好将page参数放在第一位否则可能引起错误

path: function(index) { //获取下一页方法
                    return "../article/getList?page=" + index+"&wzlb=" + clickid;
                },

⑤ 这里推荐大家一个loading的gif动图，配置好路径就可以了

![20180523161108688][]

### **二、infinite-scroll和SpringMVC的数据交互** ###

直接看代码

@RequestMapping(value="/getList",method = RequestMethod.GET)
        @ResponseBody
        public ModelMap getList(HttpServletRequest request, HttpServletResponse response, String wzlb, String page){
            StringBuffer sb = new StringBuffer();
            ModelMap map = new ModelMap();
            try {
                Sort sort = new Sort(Sort.DEFAULT_DIRECTION, "id");
                Pageable pageable = new PageRequest(Integer.parseInt(page)-1, 10, sort);
                Page<Article> pagae = articleService.findByWzlb(pageable, wzlb);
                pagae.getContent().forEach((Article article)->sb.append("<li><label>"+article.getWzbt()+"</label><p>"+article.getZy()+"</p></li>"));
                map.put("list",sb);
            }catch (Exception e){
                e.printStackTrace();
            }
            return  map;
        }

① @ResponseBody指定返回数据类型是json格式，接收String wzlb, String page两个参数

② Pageable pageable = new PageRequest(Integer.parseInt(page)-1, 10, sort);需要三个参数，分别是页码，数据量大小和排序规则，我在这里将page-1是因为当第一次请求下一页时page传进来的值为2，但是我们通过Pageable分页传参页码是从0开始，因此需要减1，后面infinite-scroll会自动递增page这样写也是合理的。

③ 返回的list可以在后台拼接也可以在js配置 template: function(data) \{...\} 中处理，将数据拼成你需要的形式即可。

本文完 2018-5-23

有问题欢迎大家留言![大笑][laugh.gif]

来自 [https://blog.csdn.net/zhulier1124/article/details/80415561][https_blog.csdn.net_zhulier1124_article_details_80415561]

转载请注明，谢谢。

[20180523143848423]: /images/20220524/2f7917c4286b41689c888fc47b7b5e9a.png
[infinitescroll]: http://www.bootcdn.cn/jquery-infinitescroll/
[Link 1]: https://infinite-scroll.com/
[20180523161108688]: /images/20220524/c9ed0cba11f04aaf8d4b7072bc97208c.png
[laugh.gif]: https://static-blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif
[https_blog.csdn.net_zhulier1124_article_details_80415561]: https://blog.csdn.net/zhulier1124/article/details/80415561