gpt4 book ai didi

thinkPHP+LayUI 流加载实现功能

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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 。

最后此篇关于thinkPHP+LayUI 流加载实现功能的文章就讲到这里了,如果你想了解更多关于thinkPHP+LayUI 流加载实现功能的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com