在开发微信集合平台的时候，首页展示公众号文章的时候，由于文章太多，展示不完，于是想到了使用流加载，下面记录如何使用Layui框架实现流加载。
0x01 html代码
1 | <span type="text" data-num="1" id="num" style="display: none"></span> |
2 | <div class="article" id="demo"></div> |
span标签的作用是，由于默认页面展示最新的文章，如果用户点击媒体社区类下的文章，在向下滑动的时候，也会导致最新文章的接口也会被调用，导致资源被浪费，通过判断span标签的data-num值，在请求之前，先判断值，在进行接口调用，这样就不会导致资源浪费，以下值对应的含义
- 1：最新文章（默认展示）
- 2：某个公众号下的文章（如i春秋）
- 3：分类下的文章（如社区媒体类）
- 4：搜索内容
以下以某个公众号文章展示如何实现流加载
0x02 javascript 代码
1 | $(function () { |
2 | $.ajaxSetup({cache:false}); |
3 | $(".layui-colla-content a").click(function (event) { |
4 | var a = $(this); |
5 | var id = a.attr('img-data'); |
6 | var flag = $("#num"); |
7 | flag.attr('data-num', "2"); //初始化flag值为2 |
8 | $("#demo").empty();//将文章列表清空 |
9 | layui.use('flow', function () { //此部分为流加载 |
10 | var flow = layui.flow; |
11 | flow.load({ |
12 | elem: '#demo' //指定列表容器 |
13 | ,scrollElem: '#demo' //滚动条所在元素选择器 |
14 | , isAuto: true //是否自动加载，如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据 |
15 | , mb: 1 //与底部的临界距离 |
16 | , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页 |
17 | layer.load(); |
18 | var lis = []; |
19 | //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回） |
20 | if (flag.attr('data-num') == '2') { //在发送请求的时候，先判断下值，如果是这个值的话，才发送请求，防止下滑时，每个接口都请求 |
21 | var url = '/articles/?page=' + page + '&id=' + id; |
22 | $.get(url, function (res) { |
23 | //假设你的列表返回在data集合中 |
24 | layer.closeAll('loading'); |
25 | layui.each(res.data, function (index, item) { |
26 | lis.push() //此处将获取的data信息，展示到页面中，此处push函数里面为传入前端的html代码 |
27 | }); |
28 | //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 |
29 | //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多 |
30 | next(lis.join(''), page < res.count); |
31 | url = '' //重新赋值，必须的，原文档没有，不重新赋值，好像有bug |
32 | }); |
33 | } |
34 | } |
35 | }); |
36 | return false |
37 | }); |
38 | }) |
39 | }); |
0x03 后端
后端的话，就按照正常的分页写即可。