"+article.getZy()+"
阅读本文可能会解决的问题:
① infinite-scroll.js和html页面的整合⑥ ...
这里先说几句无关的话,无限翻页是一个很简单的需求,为了节省网络资源提高用户体验很多网站都使用这种形式,但是在自己做的时候发现一个很实用的js插件被很多人描述的很潦草,还有的居然骗下载赚积分,真的过分!自己研究之后决定记录一下,方便自己也分享给大家。
这个示例实现的效果:打开页面鼠标滚轮滑到页面底部,自动加载下一页数据,直到所有数据加载完成。
引入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 '测试数据1
测试数据2
';
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 '测试数据1
测试数据2
';
return data.list;
},
④ 这里path获取下一页的请求地址,page是插件自动递增所以不需要处理,直接拼接index即可,如果有其他参数需要传递需要像我这样拼接,最好将page参数放在第一位否则可能引起错误
path: function(index) { //获取下一页方法
return "../article/getList?page=" + index+"&wzlb=" + clickid;
},
⑤ 这里推荐大家一个loading的gif动图,配置好路径就可以了
直接看代码
@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 pagae = articleService.findByWzlb(pageable, wzlb);
pagae.getContent().forEach((Article article)->sb.append(""+article.getZy()+"
"));
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
有问题欢迎大家留言
来自 https://blog.csdn.net/zhulier1124/article/details/80415561
转载请注明,谢谢。