layui 页面内流加载更多内容；

实现效果如下：页面内打开弹框，实现加载更多效果；

1. HTML部分设置：

 <!-- 消息提醒 -->
<a id="top-message" class="layui-icon  layui-icon-notice"><span class="layui-badge mes-num">9</span></a>

 <!-- 消息弹框里内容 -->
 <div id="mes-content" style="display:none;height:100%;">
       <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
           <ul class="layui-tab-title  msg-title">
                  <li class="layui-this">系统公告<span class="layui-badge">12</span></li>
                  <li>升级公告<span class="layui-badge">15</span></li>
           </ul>
           <div class="layui-tab-content" style="bottom: 10px;position: absolute;top: 51px;overflow:auto">
              <div class="layui-tab-item layui-show">
                        <ul class="mes-lists" id="mes-lists-01">
                        </ul>
              </div>
              <div class="layui-tab-item">
                    <ul class="mes-lists" id="mes-lists-02">
                    </ul>
              </div>
         </div>
      </div>
  </div>

2. js设置内容，实现功能加载；

 layui.use(["bodyTab", "form", "element", "layer", "jquery","flow"], function () {
            var form = layui.form,
                flow=layui.flow,
                element = layui.element;
                $ = layui.$;
                layer = parent.layer === undefined ? layui.layer : top.layer;
                tab = layui.bodyTab({
                    openTabNum: "30", //最大可打开窗口数量
                    url: zmlist //获取菜单json地址 json2/navs.json
                }); 
           //点击消息铃铛
            $("#top-message").click(function(){               
             var index=layer.open({
                    type:1,
                    content:$("#mes-content"),
                    title:false,
                    closeBtn:0,
                    anim: 2,
                    shadeClose:true,
                    area:['300px','calc(100% - 50px)'],
                    // offset:['50px', left]
                    offset:'rb',
                    success:function(layero,index){
                        console.log(layero);
                        $(layero).find('.layui-layer-content').css('height','100%');
                    }
                })
         
            })

            flow.load({
                elem: '#mes-lists-01', //流加载容器
                scrollElem: '#mes-lists-01', //滚动条所在元素，一般不用填，此处只是演示需要。
                done: function(page, next){ //执行下一页的回调               
                //模拟数据插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 8; i++){
                    lis.push('<li><p class="tit"><span class="layui-badge-dot"></span>挪挪订系统公告挪挪订系统公告挪挪订系统公告</p>'+
                            '<p class="time">2019-10-22 11:20:37</p></li>')
                    }                    
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 10); //假设总页数为 10
                    }, 500);
                }
            });

            flow.load({
                elem: '#mes-lists-02', //流加载容器
                scrollElem: '#mes-lists-02', //滚动条所在元素，一般不用填，此处只是演示需要。
                done: function(page, next){ //执行下一页的回调               
                //模拟数据插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 8; i++){
                    lis.push('<li><p class="tit"><span class="layui-badge-dot"></span>挪挪订系统公告挪挪订系统公告挪挪订系统公告</p>'+
                            '<p class="time">2019-10-22 11:20:37</p></li>')
                    }                    
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 10); //假设总页数为 10
                    }, 500);
                }
            });
});