请教关于分页?无限加载的问题
发布于 7个月前 作者 lynan 605 次浏览 来自 问答

情况时这样的,我用express+mogoose从mongoDB制作的API,例如get请求新闻列表 假设后端返回了1000条记录,按时间最新顺序降序 但是我前端页面不希望一次性渲染出这么多,页面中我想要显示前20条 当我点击一个“更多”按钮或者,继续加载20条,当前40条 再点击更多,再加载20条,现在共60条, 该如何实现?

FireShot Capture 9 - campus - http___www.pocill.com_campus_#_.png

4 回复

这种一般是后端来做分页, 不用一下返回1000条, 当然楼主想前端做也是可行的, 只是不推荐, 前后端的算法是一样的,

总数据.slice(当前页 * 一页展示多少条,当前页 * 一页展示多少条 + 一页展示多少条 )

比如, 你的总数据为1000, 当前在第5页, 一页展示20条 那么算法就是

const page = 5;
const pageSize = 20;
const total = new Array(1000);
for(let i=0; i<total.length; i++){
   total[i] = i+1
}
const data = total.slice(5*20, 5*20+20)
//  [101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120]

data 就是你当前要展示的数据

@ab8512 好的,我尝试一下,谢谢解答,很详细!

问题已解决,前端处理数据毕竟不是太好,吧? 所以寻找到了后端查数据时候进行分页查询 参考StackOverflow上面的解答,解决了。 链接地址 微信图片_20180106000716.png

对的, 后端来做才是正解

回到顶部