yhl452493373/layui-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加单页应用的layui-admin

Browse Source
This commit is contained in:
杨黄林
2024-01-22 12:22:41 +08:00
parent acf64a0c71
commit 1b2929f32e
344 changed files with 21782 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
single/res/views/component/flow/index.html Normal file
View File

@@ -0,0 +1,119 @@
<title>流加载</title>
<!-- 以下样式仅供演示 -->
<style>
#LAY-flow-demo .flow-default{width: 600px; height: 400px; overflow: auto; font-size: 0;}
#LAY-flow-demo .flow-default li{display: inline-block; margin: 0 5px; font-size: 14px; width: 48%; margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee;}
#LAY-flow-demo .flow-default img{width: 100%; height: 100%;}
#LAY-flow-demo .site-demo-flow{width: 600px; height: 300px; overflow: auto; text-align: center;}
#LAY-flow-demo .site-demo-flow img{width: 40%; height: 200px; margin: 0 2px 5px 0; border: none;}
@media screen and (max-width: 768px) {
#LAY-flow-demo .flow-default,
#LAY-flow-demo .site-demo-flow{width: 100%;}
#LAY-flow-demo .flow-default li{width: 45%}
#LAY-flow-demo .site-demo-flow img{height: 150px;}
}
</style>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>流加载</cite></a>
</div>
</div>
<div class="layui-fluid" id="LAY-flow-demo">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">信息流 - 滚动加载</div>
<div class="layui-card-body">
<ul class="flow-default" id="test-flow-auto"></ul>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">信息流 - 手工加载</div>
<div class="layui-card-body">
<ul class="flow-default" style="height: 300px;" id="test-flow-manual"></ul>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">图片懒加载</div>
<div class="layui-card-body">
<div class="site-demo-flow" id="test-flow-lazyimg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
<img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use(['admin', 'flow'], function(){
var flow = layui.flow;
flow.load({
elem: '#test-flow-auto' //流加载容器
,scrollElem: '#test-flow-auto' //滚动条所在元素，一般不用填，此处只是演示需要。
,done: function(page, next){ //执行下一页的回调
//模拟数据插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 8; i++){
lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
}
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < 10); //假设总页数为 10
}, 500);
}
});
flow.load({
elem: '#test-flow-manual' //流加载容器
,scrollElem: '#test-flow-manual' //滚动条所在元素，一般不用填，此处只是演示需要。
,isAuto: false
,isLazyimg: true
,done: function(page, next){ //加载下一页
//模拟插入
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img lay-src="https://unpkg.com/outeres@0.0.5/demo/000.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
}
next(lis.join(''), page < 6); //假设总页数为 6
}, 500);
}
});
//按屏加载图片
flow.lazyimg({
elem: '#test-flow-lazyimg img'
,scrollElem: '#test-flow-lazyimg' //一般不用设置，此处只是演示需要。
});
});
</script>