ThinkPHP使用Layui实现下拉加载

整体基本和Flask一样,笔记地址:https://sulao.cn/post/625.html,语言都是相通的,不多介绍,直接看代码吧,layui都封装好了用法,直接用即可

Thinkphp控制器代码

<?php
namespace app\index\controller;

class Index extends Base{
    //首页
    public function index(){
      $data = db('picture')->where('status=99')->order('id desc')->limit(10)->select();
      $seo = $this->site();
      $this->assign('data', $data);
      $this->assign('seo', $seo);
      return $this->fetch();
    }
    //首页ajax下拉加载
    public function ajaxPic(){
      $p = $_POST['page'] ? intval($_POST['page']) : 1;
      $pagebase = 10;    //首页默认显示10张,这里基数为10
      $pagenum = 6;      //ajax每次追加显示6张
      $limit = $pagebase + ($p * $pagenum);
      $count = db('picture')->where('status=99')->count();
      $totalpage = ceil($count/$pagenum);
      $list = db('picture')->where('status=99')->order('id desc')->limit($limit,$pagenum)->select();
      if($totalpage > 1 && $p <= 10){
        $data = array();
        $data['code'] = 1;
        $data['msg'] = 'OK';
        if($totalpage > 10){
          $data['pagetotal'] = 10;
        }else{
          $data['pagetotal'] = $totalpage;
        }
        foreach ($list as $k => $v) {
          $list[$k]['inputtime'] = date('Y-m-d',$v['inputtime']);
        }
        $data['list'] = $list;
      }else{
        $data['code'] = 0;
        $data['msg'] = '数据获取失败,请稍后再试!';
      }
      echo json_encode($data, JSON_FORCE_OBJECT);
    }
}

前端代码

{include file="public/header" /}
<section>
  {volist name="data" id="vo"}
  <div class="layui-box">
    <a class="layui-thumb" href="{:url('index/detail',['id'=>$vo.id])}"><img lay-src="{$vo.thumb}?x-oss-process=style/midpic" alt="{$vo.title}" /></a>
    <div class="layui-title">
          <h2><a href="{:url('index/detail',['id'=>$vo.id])}" title="{$vo.title}">{$vo.title}</a></h2>
        </div>
        <div class="layui-tips">
            <div class="layui-posttime"><i class="layui-icon">&#xe609;</i><span class="layui-badge layui-date">{$vo.inputtime|date="Y-m-d",###}</span></div>
        </div>
  </div>
  {/volist}
</section>
{load href="__LAYUI__/index.js" /}
{include file="public/footer" /}

index.js代码

layui.use(['flow','jquery'], function(){
  var $ = layui.jquery;
  var flow = layui.flow;
  flow.load({
    elem: 'section'
    ,isAuto: true
    ,isLazyimg: true
    ,end: '更多图片请查看分类'
    ,done: function(page, next){
      setTimeout(function(){
      var lis = [];
      $.ajax({
        url: '/index/ajaxPic.html',
        data: {page: page},
        type: 'POST',
        dataType: 'json',
        success: function(json){
          var data = json;
          var arr = Object.keys(data.list);
          if(data.code == 1){ 
            for(var i = 0; i < arr.length; i++){   
              var str = '<div class="layui-box">'
                        +'<a class="layui-thumb" href="/detail/'+data.list[i].id+'.html"><img src="'+data.list[i].thumb+'?x-oss-process=style/midpic" alt="'+data.list[i].title+'" /></a>'
                        +'<div class="layui-title"><h2><a href="/detail/'+data.list[i].id+'.html" title="'+data.list[i].title+'">'+data.list[i].title+'</a></h2></div>'
                        +'<div class="layui-tips"><div class="layui-posttime"><i class="layui-icon">&#xe609;</i><span class="layui-badge layui-date">'+data.list[i].inputtime+'</span></div></div>'
                        +'</div>';
              lis.push(str);      
            }
            next(lis.join(''), page < data.pagetotal);
          }else{
            return false;
          }
        }
      });
      },500);
    }
  });
});


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://sulao.cn/post/626.html

我要评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。