经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » PHP » 查看文章
thinkPHP+LayUI 流加载实现功能
来源:jb51  时间:2019/9/29 8:39:23  对本文有异议

html

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

js,要引入layui.js

  1. layui.use('flow', function() {
  2. var $ = layui.jquery;
  3. var flow = layui.flow;
  4. flow.load({
  5. elem: '#container' //流加载容器
  6. //滚动条所在元素,一般不用填,此处只是演示需要。
  7. ,done: function(page, next){ //执行下一页的回调
  8. console.log(page)
  9. //模拟数据插入
  10. setTimeout(function(){
  11. var lis = [];
  12. var url = "/index/index/ajaxNews/?page="+page
  13. $.get(url,function (res) {
  14. layui.each(res.msg.data, function(index, item) {
  15. 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/> ');
  16. });//组装html
  17. //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
  18. next(lis.join(''), page <= res.msg.pages);
  19. })
  20. }, 300);
  21. }
  22. });
  23. });
  24. </script>
  25.  

php Controller控制器

  1. public function ajaxNews()
  2. {
  3. $page = input('page'); //页码
  4. $pagesize = 6;
  5. $list['data'] = model('Index')->getNewsList($page,$pagesize);
  6. $count= model('Index')->getNewsCount();
  7. $list['pages'] = ceil($count/$pagesize);
  8. if ($list) {
  9. return return_succ($list);
  10. }else{
  11. return return_error('暂无数据');
  12. }
  13. }
  14.  

php model模型

  1. // 获取动态列表
  2. public function getNewsList($page,$pagesize)
  3. {
  4. $list = Db::name('news')
  5. ->field('id,title,intro,cover_img')
  6. ->order('create_time desc')
  7. ->where(['status'=>0])
  8. ->page($page,$pagesize)
  9. ->select();
  10. return $list;
  11. }
  12. //获取动态总条数
  13. public function getNewsCount()
  14. {
  15. $count = Db::name('news')->where(['status'=>0])->count();
  16. return $count;
  17. }
  18.  

总结

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号