Layui中的流加载模块flow主要支持信息流加载和图片懒加载两部分内容,前者是指动态加载后续内容,示例的话可以参考csdn个人博客主页,鼠标移动到页面底部时自动加载更多内容,而后者是指页面显示图片时才会延迟加载图片信息。
flow模块支持图片懒加载,也即延迟加载,应用比较简单,即之前img标签中将之前采用src属性设置图片地址的方式修改为lay-src属性设置图片地址,同时采用JavaScript调用flow模块中的flow.lazyimg()函数即可对页面中的全部带有 lay-src 的 img 元素启用延迟加载功能。
flow流加载模块中信息流加载功能的基本用法及显示效果如下所示(测试该模块需要后台服务支持提供分页数据,本文测试时采用SqlSugar分页获取环境监测数据并以webapi形式供前段调用):
<ul class="flow-default" id="demo"></ul>
<script>
layui.use('flow', function(){
var flow = layui.flow;
var $ = layui.jquery;
flow.load({
elem: '#demo' ,//流加载容器
isAuto:false
,done: function(page, next){ //执行下一页的回调
var lis = [];
$.get('http://localhost:5098/ECData/List?page='+page, function(res){
layui.each(res.data, function(index, item){
lis.push('<li>'+ item.id +':温度-'+item.temperature+',湿度-'+item.humidity+'</li>');
});
next(lis.join(''), page < res.pages);
});
}
})
});
</script>
不同于其它模块调用的是render函数,flow流加载模块中信息流加载功能调用的是flow.load,其输入参数类似于render函数,也是组织基础参数的集合。
基础参数isAuto设置滚动到页面底部时是否自动加载后续内容,默认为true,为false时会在页面底部显示“加载更多”按钮,需要点击该按钮才会加载后续内容(示例见上面截图)。
基础参数mb设置滚动条与底部的临界距离,默认50,当isAuto为true且滚动条与底部小于等于该距离时,触发后续内容自动加载。
基础参数end设置内容全部加载后的提示信息,默认显示内容为“没有更多了”,其效果如下所示:
基础参数done设置触发内容自动加载时的事件处理函数,函数包括两个参数page和next,page为后续要加载内容的页码,而next为满足“加载更多”的条件,关于done的使用示例可查看参考文献3和参考文献4中的flow模块源码。
由于是前端调用本地webapi,调用过程中出现了跨域调用的错误,之前也遇到过,通过对照参考文献5解决的问题。
参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://blog.csdn.net/gc_2299/article/details/125646074