layui框架学习（33：流加载模块）-Toy模板网

这篇具有很好参考价值的文章主要介绍了layui框架学习（33：流加载模块）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

layui框架学习（33：流加载模块）,网页编程,layui,流加载,flow

不同于其它模块调用的是render函数，flow流加载模块中信息流加载功能调用的是flow.load，其输入参数类似于render函数，也是组织基础参数的集合。
基础参数isAuto设置滚动到页面底部时是否自动加载后续内容，默认为true，为false时会在页面底部显示“加载更多”按钮，需要点击该按钮才会加载后续内容（示例见上面截图）。
基础参数mb设置滚动条与底部的临界距离，默认50，当isAuto为true且滚动条与底部小于等于该距离时，触发后续内容自动加载。
基础参数end设置内容全部加载后的提示信息，默认显示内容为“没有更多了”，其效果如下所示：
layui框架学习（33：流加载模块）,网页编程,layui,流加载,flow

基础参数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文章来源地址https://www.toymoban.com/news/detail-616184.html

到了这里，关于layui框架学习（33：流加载模块）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！