整体基本和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"></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"></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); } }); });