做的好的微商城网站,网站建网站建站,免备案域名直购,中国设计网站排行榜前十名Layui中的流加载模块flow主要支持信息流加载和图片懒加载两部分内容#xff0c;前者是指动态加载后续内容#xff0c;示例的话可以参考csdn个人博客主页#xff0c;鼠标移动到页面底部时自动加载更多内容#xff0c;而后者是指页面显示图片时才会延迟加载图片信息。 fl… Layui中的流加载模块flow主要支持信息流加载和图片懒加载两部分内容前者是指动态加载后续内容示例的话可以参考csdn个人博客主页鼠标移动到页面底部时自动加载更多内容而后者是指页面显示图片时才会延迟加载图片信息。 flow模块支持图片懒加载也即延迟加载应用比较简单即之前img标签中将之前采用src属性设置图片地址的方式修改为lay-src属性设置图片地址同时采用JavaScript调用flow模块中的flow.lazyimg()函数即可对页面中的全部带有 lay-src 的 img 元素启用延迟加载功能。 flow流加载模块中信息流加载功能的基本用法及显示效果如下所示测试该模块需要后台服务支持提供分页数据本文测试时采用SqlSugar分页获取环境监测数据并以webapi形式供前段调用 ul classflow-default iddemo/ulscript 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?pagepage, 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和nextpage为后续要加载内容的页码而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
