71 lines
3.1 KiB
HTML
71 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>欢迎页</title>
|
||
<link rel="stylesheet" href="../../static/frame/layui/css/layui.css">
|
||
<link rel="stylesheet" href="../../static/frame/static/css/style.css">
|
||
<link rel="icon" href="../../static/frame/static/image/code.png">
|
||
</head>
|
||
<body class="body">
|
||
|
||
|
||
<div class="layui-row layui-col-space10 my-index-main">
|
||
<ul class="layui-timeline" id="LAY_demo1"></ul>
|
||
</div>
|
||
|
||
|
||
<script src="../../static/jquery-3.3.1.js"></script>
|
||
<script type="text/javascript" src="../../static/frame/layui/layui.js"></script>
|
||
<script type="text/javascript" src="../../static/js/index.js"></script>
|
||
<script type="text/javascript" src="../../static/frame/echarts/echarts.min.js"></script>
|
||
<script type="text/javascript">
|
||
var adlist = '';
|
||
|
||
layui.use(['flow', 'element', 'layer', 'vip_tab'], function () {
|
||
// 打开选项卡
|
||
$('.my-nav-btn').on('click', function () {
|
||
if ($(this).attr('data-href')) {
|
||
vipTab.add($(this), '<i class="layui-icon">' + $(this).find("button").html() + '</i>' + $(this).find('p:last-child').html(), $(this).attr('data-href'));
|
||
}
|
||
});
|
||
var flow = layui.flow;
|
||
//var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
|
||
|
||
flow.load({
|
||
elem: '#LAY_demo1' //指定列表容器
|
||
, done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
|
||
var lis = [];
|
||
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
|
||
$.get('../ajax.php?mod=sitelog&page=' + page, function (res) {
|
||
//假设你的列表返回在data集合中
|
||
//alert(res);
|
||
res = JSON.parse(res);
|
||
layui.each(res.data, function (index, item) {
|
||
|
||
lis.push(' <li class="layui-timeline-item">\n' +
|
||
' <i class="layui-icon layui-timeline-axis" style="color: ' + item.color + ';font-size: 26px">' + item.icon + '</i>\n' +
|
||
' <div class="layui-timeline-content layui-text">\n' +
|
||
' <h3 class="layui-timeline-title">' + item.time + '</h3>\n' +
|
||
' <p>' + item.content + '</p>\n' +
|
||
' </div>\n' +
|
||
' </li>');
|
||
|
||
});
|
||
|
||
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
|
||
next(lis.join(''), page < res.pages);
|
||
});
|
||
}
|
||
});
|
||
|
||
});
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html> |