整体基本和Flask一样,笔记地址:https://sulao.cn/post/622,语言都是相通的,不多介绍,直接看代码吧,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);
}
});
});内容版权声明:除非注明,否则皆为本站原创文章。
评论列表