网站框架是thinkphp的。
怎么根据后台同一天的时间录入的内容列表,然后分组出来调用出这一天的列表,比如2024.10.20有4条内容。
需要看下什么配置文件我在截图发出来。
调用方式是这种:
<My:list catid="1" limit="4" id="r" key="i" order="listorder desc,id desc">
<li>{$r['title']}</li>
</My:list>
示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>根据时间分组 </title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<link rel="stylesheet" href="https://www.swiper.com.cn/package/swiper-bundle.min.css" />
</head>
<body>
<style type="text/css">
.main{display:table;width: 800px;margin: auto;padding:20px;margin-bottom:20px;}
.tone{margin:0px;padding:0px}
.tone li{display: inline-block;padding:10px 30px;margin: 0 10px;cursor: pointer;background:#ddd;}
.tone li.active{background:#f60}
.down{ }
.down .frame{display:none; padding:20px;margin-top: 10px;background:#ddd;}
.down .frame.on{display: block;}
/*-list-*/
.list {display: flex;flex-wrap: wrap;padding:0px; width:100%;height:200px;margin-left:-10px;}
.list li {display:flex;justify-content:center;align-items:center;width:calc(25% - 10px);margin-left:10px; text-align:center;font-size:16px;background:#fff;}
</style>
<div class="main">
<ul class="tone">
<li class="active">2024.10.20</li>
<li>2024.10.22</li>
</ul>
<div class="down">
<div class="frame on">
<ul class="list">
<li>标题1 发布时间:2024.10.20</li>
<li>标题2 发布时间:2024.10.20</li>
<li>标题3 发布时间:2024.10.20</li>
<li>标题4 发布时间:2024.10.20</li>
</ul>
</div>
<div class="frame">
<ul class="list">
<li>标题1 发布时间:2024.10.22</li>
<li>标题2 发布时间:2024.10.22</li>
<li>标题3 发布时间:2024.10.22</li>
<li>标题4 发布时间:2024.10.22</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$('.tone li').mouseover(function() {
$(this).addClass("active").siblings().removeClass('active');
var idx = $(this).index();
$(".down .frame").eq(idx).addClass("on").siblings(".down .frame").removeClass("on");
});
</script>
</body>
</html>