thinkPHP+LayUI 流加载实现功能

html

?

1	< div class = "layui-container" id = "container" > </ div >

js，要引入layui.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

layui. use ( 'flow' , function () {    var $ = layui.jquery;    var flow = layui.flow;      flow.load({      elem: '#container' //流加载容器        //滚动条所在元素，一般不用填，此处只是演示需要。      ,done: function (page, next){ //执行下一页的回调       console.log(page)       //模拟数据插入       setTimeout( function (){        var lis = [];        var url = "/index/index/ajaxNews/?page=" +page        $.get(url, function (res) {                     layui.each(res.msg.data, function (index, item) {              lis.push('<div class = "layui-row list" >\                <a href= "newsDesc/id/'+item.id+'" rel= "external nofollow" >\                  <div class = "layui-col-xs4 layui-col-sm4 " >\                    <img src= "'+item.cover_img+'" >\                  </div>\                  <div class = "layui-col-xs7 layui-col-sm7 right" >\                    <div class = "title" > '+item.title+' </div>\                    <div class = "intro" > '+item.intro+' </div>\                  </div>\                </a>\              </div>\              <hr/> ');            }); //组装html            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多            next(lis.join( '' ), page <= res.msg.pages);                 })       }, 300);      }     }); }); </script>

php Controller控制器

?

1 2 3 4 5 6 7 8 9 10 11 12 13

public function ajaxNews()    {      $page = input( 'page' );  //页码      $pagesize = 6;      $list [ 'data' ] = model( 'Index' )->getNewsList( $page , $pagesize );      $count = model( 'Index' )->getNewsCount();      $list [ 'pages' ] = ceil ( $count / $pagesize );      if ( $list ) {        return return_succ( $list );      } else {      return return_error( '暂无数据' );      }    }

php model模型

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 获取动态列表    public function getNewsList( $page , $pagesize )    {      $list = Db::name( 'news' )        ->field( 'id,title,intro,cover_img' )        ->order( 'create_time desc' )        ->where([ 'status' =>0])        ->page( $page , $pagesize )        ->select();      return $list ;    }    //获取动态总条数    public function getNewsCount()    {      $count = Db::name( 'news' )->where([ 'status' =>0])-> count ();      return $count ;    }

总结

以上所述是小编给大家介绍的thinkPHP+LayUI 流加载实现功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

原文链接：https://www.cnblogs.com/zxf100/archive/2019/09/27/11596813.html